playwright-the

playwright-the makes it easier to work with Playwright's Layout selectors.

Installation

npm i playwright-the

Usage

Use with playwright

import { chromium } from 'playwright';
import { the } from 'playwright-the';

const example = async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await browser.newPage();
  await page.goto('https:/example.com');

  const cancelButton = the('button').hasText('Cancel'); //without the: 'button:has-text("Cancel")'
  const saveButton = the('button').hasText('Save'); //without the: 'button:has-text("Save")'
  await page.locator(the(saveButton).rightOf(cancelButton)).click(); //without the: `${saveButton}:right-of(${cancelButton})`

  await browser.close();
};

Examples

:text

the('button').text('OK');

:has-text

the('button').hasText('OK');

:below

the('button').below('div');

:above

the('button').above('div');

:right-of

the('button').rightOf('div');

:left-of

the('button').leftOf('div');

:near

the('button').near('div');

inside selector

the('button').inside('div'); // equals to the "div button" CSS selector

simple text selector

the.text('OK'); // equals to the ':text("OK")' selector

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT