Managing dynamic text within a label using Playwright

Question

Managing dynamic text within a label using Playwright

In my Playwright Typescript test, I have the following code snippet:

await page.goto('https://demoqa.com/');
await page.getByLabel('Optionen verwalten', { exact: true }).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (32' }).locator('span').nth(2).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (49' }).locator('span').nth(2).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (16' }).locator('span').nth(2).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (22' }).locator('span').nth(2).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (40' }).locator('span').nth(2).click();
await page.locator('label').filter({ hasText: 'Berechtigtes Interesse (3 Anbieter' }).locator('span').nth(2).click();
await page.getByRole('button', { name: 'Auswahl bestätigen' }).click();

The HTML contains multiple labels, here are two examples:

<label class="fc-preference-slider-container fc-consent-preference-container"><span class="fc-preference-slider-label">Einwilligung (77&nbsp;Anbieter)</span><span class="fc-preference-slider"><input type="checkbox" role="button" aria-label="Einwilligung (77&nbsp;Anbieter), Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen" aria-pressed="false" tabindex="0" class="fc-preference-consent purpose" data-id="2"><span class="fc-slider-el"></span></span></label>

<label class="fc-preference-slider-container fc-legitimate-interest-preference-container" for="fc-preference-slider-purpose-2"><span class="fc-preference-slider-label">Berechtigtes Interesse (32&nbsp;Anbieter)<button class="fc-help-tip" data-title="Was bedeutet ein berechtigtes Interesse?" data-full-info="Einige Anbieter bitten Sie nicht um Ihre Einwilligung, sondern nutzen Ihre personenbezogenen Daten auf Grundlage ihres berechtigten Interesses." role=&...

To deselect all options with aria-pressed="true", I need to find a more robust locator because the label text may change. I can use the unique id for that slider:

const slider2 = page.locator('[id$="fc-preference-slider-purpose-2"]');

But how do I adjust the code to click on the associated slider?

typescript filter label playwright dynamic-text

Answer 1

Answer №1

One possible approach is to utilize regex in order to target the label. It seems that there is a specific pattern involving {text} ({number} {text}):

await page.locator('label')
  .filter({ hasText: /^[\w ]+\(\d+ [\w ]+\)$/ })

If you have the ability to modify the HTML, a more efficient method would be to include a data-testid="your-id" attribute and then implement a simplified query:

await page.getByTestId('your-id')

Answer 2

One possible approach is to utilize regex in order to target the label. It seems that there is a specific pattern involving {text} ({number} {text}):

await page.locator('label')
  .filter({ hasText: /^[\w ]+\(\d+ [\w ]+\)$/ })

If you have the ability to modify the HTML, a more efficient method would be to include a data-testid="your-id" attribute and then implement a simplified query:

await page.getByTestId('your-id')

Answer 3

Answer №2

getByLabel function operates on a substring matching basis, which could be suitable for your specific scenario:

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

const html = `<!DOCTYPE html><html><body>
<input
  type="checkbox"
  role="button"
  aria-label="Berechtigtes Interesse (32&nbsp;Anbieter), Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen"
  aria-pressed="true"
  tabindex="0"
  class="fc-preference-legitimate-interest purpose"
  data-id="2"
  id="fc-preference-slider-purpose-2"
  checked=""
>
</body></html>`;

test("input is selectable via partial label substring", async ({page}) => {
  await page.setContent(html);
  const label = "Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen";
  await expect(page.getByLabel(label)).toBeVisible();
});

If you require more accuracy, an alternative approach is using a CSS attribute selector $ to search based on the end of the attribute value:

// ...
  const input = page.locator(
    '[aria-label$="Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen"]'
  );
  await expect(input).toBeVisible();
// ...

The usage of .locator('span').nth(2) seems unrelated to your HTML structure; it's not recommended as it doesn't verify user-visible behavior. Providing additional context can help in avoiding such practices.

Answer 4

getByLabel function operates on a substring matching basis, which could be suitable for your specific scenario:

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

const html = `<!DOCTYPE html><html><body>
<input
  type="checkbox"
  role="button"
  aria-label="Berechtigtes Interesse (32&nbsp;Anbieter), Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen"
  aria-pressed="true"
  tabindex="0"
  class="fc-preference-legitimate-interest purpose"
  data-id="2"
  id="fc-preference-slider-purpose-2"
  checked=""
>
</body></html>`;

test("input is selectable via partial label substring", async ({page}) => {
  await page.setContent(html);
  const label = "Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen";
  await expect(page.getByLabel(label)).toBeVisible();
});

If you require more accuracy, an alternative approach is using a CSS attribute selector $ to search based on the end of the attribute value:

// ...
  const input = page.locator(
    '[aria-label$="Verwendung reduzierter Daten zur Auswahl von Werbeanzeigen"]'
  );
  await expect(input).toBeVisible();
// ...

The usage of .locator('span').nth(2) seems unrelated to your HTML structure; it's not recommended as it doesn't verify user-visible behavior. Providing additional context can help in avoiding such practices.

Managing dynamic text within a label using Playwright

Answer №1

Answer №2

Similar questions

Automatic type inference for functions in TypeScript with arguments

Encountering a problem during the installation of angular-route.d.ts

Invalid Redux store: Element type is not valid; a string type is expected

Tips for setting up a React TypeScript project with custom folder paths, such as being able to access components with `@components/` included

The type is lacking the property onAuxClickCapture and onAuxClick

Leveraging moment.format Function in Angular within an HTML Context

Setting the response type to text in Angular 6 when making an http call

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

The Child/Parent arguments in Typescript methods cannot be assigned

Create a prop type that can be either a single number or an array of numbers, depending on the value of another

Prevent methods from being called in a Typescript class after they have already

Unable to loop through the Array

Looking for a JavaScript (Angular) event listener to trigger when closing pages and tabs

<Click here to navigate to page 2> await whenClicked={navigation.navigate("page_2")} />

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Is there a way to combine compiling TypeScript and running the resulting .js file into one build command in Sublime Text 3?

The error message states that the property "user" is not found in the type "Session & Partial<SessionData>"

Accessing node_modules in TypeScript within an Asp.Net Core application

Encountering an issue during the registration of reducers with ActionReducerMap: "does not match the type 'ActionReducerMap<AppState, Action>'"

Issue with React not displaying JSX when onClick Button is triggered