0

我一直在 Python (v1.16) 上使用 Playwright 工具，并认为我会迁移我们的一些 Cypress 测试作为实验。但是，我遇到了几个与同一个问题相关的障碍：我需要等待一些任意的 DOM 状态，但不知道如何。

我知道 Playwright 可以等待一些元素状态，例如可见或分离，但我也想要一些等待其他 DOM 状态的东西，比如文本出现，元素属性具有特定值，或者元素中的 HTML 结构改变等

例如，在一个测试中，我有一个进度指示器，它会在表格完成后一秒左右更新。我想断言进度百分比达到预期值，但为了做到这一点，我需要等待进度元素的文本相应更改。如果不编写自己的投票方案，我不知道如何做到这一点。

在另一种情况下，我有一个Submit以这种“非常酷”的动态方式构建的按钮，它使用.disabledCSS 类向用户指示他们无法提交表单（该按钮还具有动态应用/删除其点击处理程序以强制执行禁用状态）。Playwright 对此一无所知，并认为该按钮已准备好在调用后立即被单击，click()因为所有可操作性检查都会立即通过。在调用之前，我需要等待disabled类从按钮中删除click()。我怎样才能做到这一点？

我知道我可以为包含我想要等待的 DOM 位的元素创建新的选择器（例如text=5%，向我的进度指示器选择器添加条件），但我不喜欢这样，因为如果它失败，我会得到一个通用的“我们找不到选择器”错误，而不是更类似于断言的错误，例如“等待元素的文本包含 5% 失败”。我还使用页面对象来存储我的选择器，如果我必须为每个元素上的每个断言创建一个新的选择器，那真的很糟糕。

是否有一种惯用的方式来等待不涉及复制/修改选择器的任意 DOM 状态？

4

2 回答 2

0

@playwright/test 使用（并扩展）了期望断言库。看看异步匹配器。

根据文档：

Playwright 还使用方便的异步匹配器对其进行了扩展，该匹配器将等待满足预期条件。

关于单击需要等到 .disabled 类被删除的按钮，我认为这很简单。只需为没有 .disabled 类的按钮创建一个定位器。这样，Playwright 的 .click() 动作将等到 DOM 中有一个没有 .disabled 类的按钮，然后再单击它。就像是：

await page.click('button:not(.disabled)')

于 2021-11-20T09:10:55.130 回答
0

在另一种情况下，我有一个提交按钮，它以这种“非常酷”的动态方式构建，它使用 .disabled CSS 类向用户指示他们无法提交表单（该按钮还具有动态应用/删除的点击处理程序强制执行禁用状态）。Playwright 对此一无所知，并认为在调用 click() 后该按钮已准备好被单击，因为所有可操作性检查都会立即通过。在调用 click() 之前，我需要等待禁用的类从按钮中删除。我怎样才能做到这一点？

这感觉像是一种 hack，而且不太可能是任何接近惯用语的东西（我也在 Playwright 上，所以我什至不知道惯用语是什么）......如果你要在页面的上下文中评估一些 JS 怎么办以便元素在达到所需状态时发出事件？

expression = """el => {
  const config = {attributes: true};
  const callback = (mutationsList, observer) => {
    for (const mutation of mutationsList) {
      const {type, attributeName, target} = mutation;
      if (type === 'attributes' && attributeName === 'class') {
        if (!target.classList.contains('.disabled')) {
          const event = new Event('myevent');
          target.dispatchEvent(event);
        }
      }
    }
  };
  const observer = new MutationObserver(callback);
  observer.observe(el, config);
}
"""
selector = '#submit'
page.eval_on_selector(selector, expression)
with page.expect_event('myevent') as event_info:
  page.click(selector)

请注意，我尚未测试此代码，因此可能需要对其进行调整。

于 2021-11-18T21:21:25.037 回答