class MyPage extends BasePage {
	Title = new ElementPO(this, '.Title');
	Field = new InputPO(this, '.Field');
	SubmitButton = new ElementPO(this, '.Button');
  
  	visit () {
       // Base URL is baked in
       return super.visit('/my-page');
    }
}

await Page.Title.click();
await Page.Bar.click({timeout: 300);
await Page.Baz.click({force: true);

await Page.Foo.waitFor();
await Page.Bar.waitFor('attached');
await Page.Baz.waitFor('hidden');

await Page.Foo.screenshot('screenshot-name-1');
await Page.Bar.screenshot('screenshot-name-2', {mask: ['#page-footer-wrapper']});
await Page.Baz.screenshot('screenshot-name-3');

import {ElementPO as ElementPOBase} from '@pomeranian/lib-standard';

export class ElementPO extends ElementPOBase {
    /*--- Actions ---*/
    async screenshot(screenshotName: string, options: LocatorScreenshotOptions = {}) {
        const optionsMerged: LocatorScreenshotOptions = {
            animations: 'disabled',
            ...options,
        };

        const testInfo = this.testInfo;
        const screenshot = await this.element.screenshot(optionsMerged);
        const testName = getTestName(testInfo);
        const projectName = testInfo.project.name;
        const sanitizedName = sanitize(screenshotName);
        const screenshotPath = `${projectName}-${testName}/${sanitizedName}.png`;

        await expect(screenshot).toMatchSnapshot(screenshotPath);
    }
}
```

ElementPO:

* `isInViewport()`
* `hasClass(name: string)`
* `hasStyle(name: string, value?: string)`


InputPO, TextareaPO:

* `setCaretToPosition(pos: number)`
* `selectText(from: number, to: number)`
* `copySelectedTextToClipboard()`
* `append(text: string)`


ImagePO:

* `getAlt()`
* `getSrc()`
* `waitForLoad()`

export class ShardTargetsPagePO extends EntitesListPO {
    target = '[data-qa="shard-targets"]';

  
    /*--- Elements --- */
    TooltipTextWithCopy = new ElementPO(this, this.page.locator('.expandable-hover-text__tooltip-container'));

  
    /*--- Actions ---*/
    async visit({shard}: {shard: string}): Promise<void> {
        const {scopeId} = this.fixtures;
        const url = `/projects/${scopeId}/shards/${shard}/view/targets`;

        await super.visit(url);
        await this.ContentWrapper.waitFor();
    }
  

    async revealTooltipOnCellWithText(text: string): Promise<void> {
        await this.Cell.filterByText(text).hover();
        await this.TooltipTextWithCopy.waitFor();
    }
}

export class PO extends PageObject {
    /*--- Pages ---*/
    ShardTargetsPage = new ShardTargetsPagePO(this);
}

export class EntitiesListPO extendsElementPO {
    target = '.ycm-entities-list"';

    /*--- Elements --- */
    ContentWrapper = new ElementPO(this, '.ycm-entities-list__content-wrapper');
  
    Cell = new ElementPO(this, (parent) => parent.getByRole('cell'));
}

export class PO extends PageObject {
    /*--- Pages ---*/
    MyPage = new MyPagePO(this);
  
    /*--- Modals ---*/
    ConfirmationDialog = new ConfirmationDialogPO(this);
}

export class MyPagePO extends ElementPO {
  	/* --- Actions --- */
    async restart() {
        await this.RestartButton.click();
        await this.root.ConfirmationModal.OkButton.click();
    }
}

await PO.MyPage.DashboardItem.first().Title.click();
await PO.MyPage.DashboardItem.nth(2).Title.click();
await PO.MyPage.DashboardItem.withText('Foo').Title.click();	
await PO.MyPage.DashboardItem.withAttr('title', 'Foo').Title.click();

export class MyPagePO extends ElementPO {
  	target = '.my-page';  
    Foo = new ElementPO(this, '.foo');
}                          // ☝️

PO.MyPage.Foo.locator.toString()
	

export class MyPagePO extends ElementPO {
  	target = '.my-page';  
    Bar = new ElementPO(this, (parentLoc) => parentLoc.getByRole('button'));
}                          // ☝️

PO.MyPage.Baz.locator.toString()

export class MyPagePO extends ElementPO {
  	target = '.my-page';  
    Bar = new ElementPO(this, this.page.getByRole('button'));
}                          // ☝️

PO.MyPage.Bar.locator.toString()