How to locate a div with specific text and test id with Playwright?

Question

How to locate a div with specific text and test id with Playwright?

319 views Asked by one-hand-octopus At 02 February 2024 at 10:39

I have a HTML like this:

<div>
  <div>Internal Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
    </div>
  </app-rich-text-editor>
</div>

<div>
  <div>External Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor">
    </div>
  </app-rich-text-editor>
</div>

If I locate the div with await page.getByTestId('rich-text-editor') I get both divs. The difference between them are the text 'Internal Description' and 'External Description'. How to locate the first div with data-testid="rich-text-editor" and parent-parallel <div>Internal Description</div>?

Original Q&A

There are 1 answers

**ggorlen** · Accepted Answer · 2024-02-02T15:27:06+00:00

You can work top-down:

Select the <div> by text
Use the + CSS selector to grab the next <app-rich-text-editor> sibling
Use the getByTestId function to select by [data-testid="rich-text-editor"].

import {expect, test} from "@playwright/test"; // ^1.39.0


const html = `<!DOCTYPE html><html><body>
<div>
  <div>Internal Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor"></div>
  </app-rich-text-editor>
</div>
<div>
  <div>External Description</div>
  <app-rich-text-editor>
    <div data-testid="rich-text-editor"></div>
  </app-rich-text-editor>
</div>
</body></html>`;

test("'Internal Description' div with rich-text-editor is visible", async ({page}) => {
  await page.setContent(html);
  const loc = page.getByText("Internal Description")
    .locator("+ app-rich-text-editor")
    .getByTestId("rich-text-editor");
  await expect(loc).toBeVisible();
});

It's also possible to use the attribute child selector since you're in CSS selector context anyway:

const loc = page.getByText("Internal Description")
  .locator('+ app-rich-text-editor > [data-testid="rich-text-editor"]');

That said, if you're testing rather than scraping, using "heavy" selectors and CSS often might be a code smell. Consider adding specific test ids to the top-level container <div> elements or using additional properties and structures that may be in your markup to keep your locators simple and avoid CSS selectors.

It may also be possible to select based on layout, depending on your use case (but this is not always reliable, so proceed with caution).

TechQA.

How to locate a div with specific text and test id with Playwright?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in E2E-TESTING

Related Questions in PLAYWRIGHT

Related Questions in ANGULARJS-E2E

Related Questions in E2E

Popular Questions

Popular Tags

Trending Questions