javascript - 检查特定属性/检查 puppeteer 中元素的陈旧性？

Question

嗨，我对此有点陌生，但我正在从使用 Node.js 的 Selenium 转移到 Puppeteer 进行 UI 测试，我想知道什么是检查 Puppeteer 的最佳方式，如果元素已经过时(从 DOM 中删除)，也是检查元素特定属性更改的最佳方法(例如，如果元素的不透明度从 0 变为 1 或元素已禁用)

以下是我如何在 Selenium 中实现这两者的一些示例:

检查属性变化-

function waitForOpacity(driver, obj, time) {
  driver.wait(() => {
    return obj.getCssValue('opacity').then(opacity => opacity === '1')
  }, time)
} 

waitForOpacity(driver, submitButton, 30000)
submitButton.click()

检查元素是否过时 -

function stalenessOf(driver, until, obj, time) {
 return driver.wait(until.stalenessOf(obj), time)
}

stalenessOf(driver, until, someModalElement, 60000)

我在 Puppeteer 中尝试过类似的东西 -

await page.waitForSelector('.myButton');
  await page.evaluate(() => {
    document.querySelector('.myButton').style.opacity === '1';
  }); 
  await page.click('.myButton');

但是我认为这不是正确的语法...感谢任何帮助，非常感谢!

Answer 1

我想经过一些研究我想通了，但不确定它是否是最干净的解决方案 -

检查不透明度变化 -

await page.waitForSelector('.myBtn');
  await page.waitFor(
    () => document.querySelector('.myBtn').style.opacity === '1'
  );
  await page.click('.myBtn');

检查元素是否过时 -

await page.waitFor(
    () => !document.querySelector('.someModalElement')
  );