jfgreffier / playwright-relative-selector

Playwright selector to locate elements relative to others

🎭 Playwright relative selector

Selecting elements based on layout is native to Playwright since 1.8.0

await page.click(':text("Sign In"):right-of(#home)');

Please refer to Playwright's documentation https://playwright.dev/docs/selectors#selecting-elements-based-on-layout

Click to see depreciated documentation

Playwright helper to locate elements relative to others

Usage

npm install --save-dev playwright-relative-selector

Once installed, you can require this package in a Node.js script and use it with Playwright.

const relativeSelector = require('playwright-relative-selector');

const clickMeElement = await relativeSelector(page, 'text="Sign In" toRightOf css=#home');
await clickMeElement.click();

Selectors

Available selectors:

• above
• below
• toLeftOf
• toRightOf
• near

An element is considered relative to another if the distance between the two is of 30px or less.

Examples

First example

This code snippet sets a page with three buttons and clicks on the 'Click me' element on the right of 'Middle'

const { firefox } = require('playwright');
const relativeSelector = require('playwright-relative-selector');

(async () => {
  const browser = await firefox.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent(`
    <div>
      <button>Click me</button><span>Middle</span><button>Click me</button>
    </div>
  `);

  const clickMeElement = await relativeSelector(page, 'text="Click me" toRightOf text="Middle"');
  await clickMeElement.click();

  await browser.close();
})();