本文へスキップ

Nightwatch Testing Library

nightwatch-testing-library を使用すると、エンドツーエンドのウェブテストのために、Nightwatch で dom-testing-library クエリを使用できます。

インストール​

Nightwatch のインストールと設定手順をまず確認してください

その後、

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

最初にこれを読んでください​

nightwatch-testing-library は、基本的に dom-testing-library クエリと CSS セレクタ間の変換を行います。これは、Nightwatch が ロケーター戦略 に対する WebDriver 標準に準拠しているためです。現時点では、これはログに非常に詳細な CSS パスが表示されることを意味します。この問題を解決するための カスタムレポーター について、PR を歓迎します 🤗。

そのため、NWTL クエリからの結果は DOM ノードではなく、WebDriver ロケーターであることを覚えておいてください。

注意：NWTL では、すべてのクエリを `await` する必要があります。

使用方法​

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

module.exports = {
  beforeEach(browser, done) {
    browser.url('https://#: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クエリの結果は、Nightwatch の関数と NWTL の `within` 関数の両方で使用できる追加関数 `nth` が追加されています。


    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://#: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')
  },
}