Nightwatch 测试库

nightwatch-testing-library 允许在 Nightwatch 中使用 dom-testing-library 查询，以进行端到端的 Web 测试。

安装

请务必先按照 Nightwatch 安装和配置说明进行操作

然后

npm

npm install --save-dev @testing-library/nightwatch

Yarn

yarn add --dev @testing-library/nightwatch

• nightwatch-testing-library 在 GitHub 上

请先阅读

nightwatch-testing-library 的核心是将 dom-testing-library 查询与 CSS 选择器进行转换。这是因为 Nightwatch 遵守 WebDriver 标准，用于 定位策略。目前，这意味着日志记录将包含一些非常详细的 CSS 路径。欢迎提出 PR 来解决这个问题的 自定义报告器 🤗。

因此请记住，NWTL 查询的结果是 WebDriver 定位器，而不是 DOM 节点。

请注意，在 NWTL 中，所有查询都必须使用 await 进行等待。

用法

const {getQueriesFrom} = require('@testing-library/nightwatch')

module.exports = {
  beforeEach(browser, done) {
    browser.url('https://127.0.0.1:13370')
    done()
  },

  async getByLabelText(browser) {
    const {getByLabelText} = getQueriesFrom(browser)

    const input = await getByLabelText('Label Text')
    browser.setValue(input, '@TL FTW')

    browser.expect.element(input).value.to.equal('@TL FTW')
  },

  async getByAltText(browser) {
    const {getByAltText} = getQueriesFrom(browser)
    const image = await getByAltText('Image Alt Text')

    browser.click(image)
    browser.expect
      .element(image)
      .to.have.css('border')
      .which.equals('5px solid rgb(255, 0, 0)')
  },
}

AllBy 查询

AllBy 查询的结果中添加了一个额外的函数：nth，该函数可以在 Nightwatch 函数中使用，也可以在 NWTL 的 within 函数中使用。

    async 'getAllByText - regex'(browser) {
        const { getAllByText } = getQueriesFrom(browser);
        const chans = await getAllByText(/Jackie Chan/)


        browser.expect.elements(chans).count.to.equal(2)

        const firstChan = chans.nth(0);
        const secondChan = chans.nth(1);


        browser.click(chans.nth(0));
        browser.click(chans.nth(1));

        browser.expect.element(secondChan).text.to.equal('Jackie Kicked');
        browser.expect.element(firstChan).text.to.equal('Jackie Kicked');

    },

配置

您可以像 dom-testing-library 一样，使用 configure 函数自定义 testIdAttribute

const {configure} = require('@testing-library/nightwatch')

configure({testIdAttribute: 'data-automation-id'})

容器

默认情况下，查询预先绑定到 document.body，因此无需提供容器。但是，如果要使用容器限制查询，可以使用 within。

使用 within 的示例

const {getQueriesFrom, within} = require('@testing-library/nightwatch')

module.exports = {
  beforeEach(browser, done) {
    browser.url('https://127.0.0.1:13370')
    done()
  },
  async 'getByText within container'(browser) {
    const {getByTestId} = getQueriesFrom(browser)

    const nested = await getByTestId('nested')
    const button = await within(nested).getByText('Button Text')

    browser.click(button)
    browser.expect.element(button).text.to.equal('Button Clicked')
  },
}