剧作家和 Javascript - 文本定位器内部的变量不起作用答案

【问题标题】：Playwright & Javascript - Variable inside of has-text locator not functioning剧作家和 Javascript - 文本定位器内部的变量不起作用
【发布时间】：2023-02-12 12:27:29
【问题描述】：

我正在尝试使用 has-text 定位器中的变量从下拉网页按钮元素中单击所选国家/地区。

我的代码是：

  const dropdown = page.locator(".ta-results");
  let country = "India";
  console.log(country);
  await dropdown.waitFor();
  await page.locator(".ta-results:has-text('${country}')").click();

下拉列表是一个国家/地区选择器，它会根据您键入的内容自动填充，因此键入“ind”会拉出印度尼西亚、印度等，我试图让它点击“印度”。通过使用".ta-results:has-text('India')").click();，它工作正常。

对于我选择第二个选项的课程来说效果很好，但我想知道如何让它接受一个变量以供将来使用。

基于这个previous question，它应该可以工作。这是失败：

=========================== logs ===========================
waiting for locator('.ta-results:has-text(\'${country}\')')
============================================================

  92 |   console.log(country);
  93 |   await dropdown.waitFor();
> 94 |   await page.locator(".ta-results:has-text('${country}')").click();
     |                                                            ^
  95 |   await page.pause();
  96 | });
  97 |

【问题讨论】：

".ta-results:has-text('${country}')" 应该使用反引号模板文字语法而不是双引号 "。您可以从自动格式化程序中看出它是按字面意思输入 ${country} 而不是注入变量。

标签： javascript css playwright

【解决方案1】：

请注意，在您链接的问题中，他们使用的是 template literals，这是一个被反引号 (`) 包围的字符串，它在 JavaScript 中允许插值，或插入变量或其他表达式之类的东西，这与其他一些双引号允许的语言不同。所以你只需要像这样在你的字符串上切换引号类型：

`.ta-results:has-text('${country}')`

您还可以使用 Playwright 提供的一种过滤选项方法：

使用the hasText option specific to the locator method：

await page.locator(".ta-results”, { hasText: country }).click();

使用the hasText option within the filter method：

await page.locator(".ta-results”).filter({ hasText: country }).click();

【讨论】：