如何使用Playwright处理Label动态文本并取消选中指定选项？

问题 #

我有一段Playwright TypeScript测试代码如下：

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

以下是两个Label的HTML示例：

<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="tooltip" aria-label="Einige Anbieter bitten Sie nicht um Ihre Einwilligung, sondern nutzen Ihre personenbezogenen Daten auf Grundlage ihres berechtigten Interesses." tabindex="0"><i class="material-icons" 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." translate="no">help_outline</i></button></span><span class="fc-preference-slider"><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=""></span><span class="fc-slider-el"></span></span></label>

我希望取消所有aria-pressed="true"的选项。当前问题是定位器不够健壮，因为使用的Label文本（如'Berechtigtes Interesse (32'）中的数字可能变化。我已尝试使用唯一ID定位：

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

但不知如何调整代码以点击关联的滑块。

解决方案 #

方案1：通用激活选项取消 #

直接通过属性选择器匹配所有激活状态的滑块输入框，点击其所属的交互容器，无需依赖易变文本：

await page.goto('https://demoqa.com/');
await page.getByLabel('Optionen verwalten', { exact: true }).click();

// 获取所有激活状态的偏好滑块输入框
const activeSliders = page.locator('input[aria-pressed="true"].purpose');
const sliderCount = await activeSliders.count();

// 遍历每个激活滑块，点击父容器触发取消操作
for (let i = 0; i < sliderCount; i++) {
  await activeSliders.nth(i).locator('..').click();
}

await page.getByRole('button', { name: 'Auswahl bestätigen' }).click();

方案2：精准针对合法兴趣类别 #

如果只需取消"Berechtigtes Interesse"相关选项，结合容器类名和激活状态筛选：

await page.goto('https://demoqa.com/');
await page.getByLabel('Optionen verwalten', { exact: true }).click();

// 定位合法兴趣类别下的激活滑块容器
const activeLegitimateSliders = page.locator('.fc-legitimate-interest-preference-container input[aria-pressed="true"]').locator('..');

// 批量点击取消所有匹配项
await activeLegitimateSliders.click({ multiple: true });

await page.getByRole('button', { name: 'Auswahl bestätigen' }).click();

关键说明 #

• 用input[aria-pressed="true"].purpose精准匹配激活状态的选项，彻底摆脱对动态文本的依赖；
• 通过locator('..')获取滑块输入框的父容器fc-preference-slider，确保点击的是用户实际交互的UI区域，而非隐藏的输入控件；
• 方案2的类名筛选fc-legitimate-interest-preference-container可以避免误操作其他类型的偏好选项，进一步提升定位精准度。

内容的提问来源于stack exchange，提问作者kech