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
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();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.
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();
})();