javascript - 如何验证 cucumberjs/puppeteer 中不存在的选择器？

Question

我正在尝试验证 cucumberjs/puppeteer 中不存在的选择器。如何使用 cucumber-assert 来使用 throws 断言？

我致力于测试自动化以支持测试 ember 前端应用程序。我正在使用 cucumberjs、puppeteerjs 和 cucumber-assert。

我之前使用过以下内容:

if (await page.waitForSelector('[data-test-text-title-refunded-widget-console="true"]')) {
            let textContentOfElement = await page.evaluate(() => document.body.querySelector('[data-test-text-title-refunded-widget-console="true"]').textContent);
            return assert.equal(textContentOfElement, widgetTitle, `title with text ${  widgetTitle  } is not present`);
        }

当我验证元素是否存在且文本是否正确时，它会起作用。 对于我当前的断言，我使用的是 cucumber-assert npm 包中的以下 throws 断言:

assert.throws(someFunctionThatThrows).then(callback);

我不确定如何处理回调函数 - 到目前为止我有以下内容。

const assert = require('cucumber-assert');

return assert.throws(await page.waitForSelector('[data-test-text-title- import-payment-file-widget-console="true"]'))
                .then(function(err) {

            });

我应该在回调中返回失败吗？

* 更新 * 我相信我找到了一种不同的方法来解决我的问题。这里应该是其他任何人将来遇到同样的问题。

    if (await page.$('[data-test-text-title-import-payment-file-widget-console="true"]', { timeout: settings._30000 }) === null) {
        return Promise.resolve();
    }
    return Promise.reject('Error: The widget is present');

Answer 1

我为这样的事情做的是创建一个方法如下:

const isElementVisible = async (page, cssSelector) => {
  let visible = true;
  await page.waitForSelector(cssSelector, { visible: true, timeout: 2000 })
  .catch(() => {
    visible = false;
  });
  return visible;
};

// Invoke it as follows
const isVisible = await isElementVisible(page, elementCssSelector);
console.log(isVisible); // Outputs true or false

关于此方法如何工作的一些提示:

• 我特意将 timeout 设置为 2000，因为如果选择器不可见，您不希望您的代码等待默认的 30000(大多数情况下)。也许您想增加/减少此 timeout 设置，因为您认为适合您的测试脚本。
• 您需要 catch block 只是因为您实际上希望该元素不可见。当超时发生时，您的测试脚本将触发异常，因为 puppeteer 认为有错误。您不希望这杀死您的测试脚本。相反，catch block 将捕获该异常并将 visible 设置为 false，然后干净地返回。

希望这对您有所帮助!