为父级存储 Playwright 元素的正确方法

Question

我试图找出存储元素定位器的最佳方法，以最终使用该定位器来查找父级。

例如，在这个特定问题中，我有一个表行 ( <tr>)，其上有一个唯一的文本Foo（作为<label>）。该表行还有一个复选框。看起来基本上是这样的：

（假设有一个轮廓，但这本质上是表格行布局。表格有很多行（数量不确定），所以我不能只说nth行。所以明显的独特元素是通过其文本获取元素并存储“孩子”定位器。我是这样做的：

const tableRow = page.locator('label:has-text("Foo")')

但是现在我需要抓住它的父级，即 >，<tr这样我就可以抓住要单击的复选框。

对此最好的办法是什么？Playwright 并不完全有一个“父”选择器，我能找到的最接近的是https://playwright.dev/docs/api/class-page#page-locator-option-has has选项。

所以根据我的理解，我需要做类似的事情：

  const tableRow = await page.locator('tr', { has: page.locator('label:has-text("Foo")') })
  await tableRow.locator('input[type="checkbox"]').check()

或者，还有更好的方法？

作为旁注：存储定位器时，它表示await不需要关键字（上面的第一行代码）。await存储定位器时我们不需要吗？

jsfiddle： https: //jsfiddle.net/mLb50jwp/（显然是最简单的版本）

Answer 1

这个直接灵活的定位器到复选框怎么样作为一个简单的答案：

const expectedName="Foo"    
const locator = `//tr[contains(.,${expectedName})]//input[@type="checkbox"]`

剧作家获取家长定位器的方法：

parent_locator = page.get_by_role("button").locator('..')

可以使用 .. 选择父元素，这是 xpath=.. 的缩写形式。

获取父定位器的一般Xpath方法：

Xpath=//*[@id='rt-feature']//parent::div

要获取特定类别的 Parent：

//span/parent::div[@class="parent"]

-- 仅返回确切节点类型的父元素。

为什么一般需要await关键字？

wait通常用于通过传递 Promise 作为表达式来解开Promise 。使用await 会暂停其周围异步函数的执行，直到promise 得到解决（即履行或拒绝）。当执行恢复时，await 表达式的值将变为已履行的 Promise 的值。

为什么声明剧作家定位器时不需要等待关键字？

在声明定位器时，没有要解决的承诺，因此不需要等待关键字，但是在执行像“单击”这样的操作时，剧作家会返回承诺，需要等待关键字来暂停执行，直到承诺得到解决。