ProtractorからNightwatchへの移行

はじめに

Protractorは、AngularおよびAngularJSアプリケーション向けの一般的なエンドツーエンドテストフレームワークでした。ただし、ProtractorはAngular 12以降の新しいAngularプロジェクトに同梱されなくなります。この移行ガイドは、チームでのProtractorからNightwatchへの移行を容易にするのに役立ちます。

はじめに

AngularプロジェクトにNightwatchを追加するには、Nightwatch Angular schematicをインストールします。

bash
ng add @nightwatch/schematics

これにより、Nightwatchがインストールされ、Nightwatchを実行するためのさまざまなスクリプトが追加され、Nightwatch構成とテストファイルが足場されます。また、プロジェクトからProtractorを削除し、デフォルトのng e2eコマンドを使用してNightwatchを使用するように再構成するように求められます。

これで、次のコマンドでNightwatchを実行できます。

bash
ng e2e

また、次のコマンドを使用してNightwatchを代替実行することもできます。

bash
ng run {your-project-name}:nightwatch-run

次のステップ

既存のe2eテストは、Protractorという新しい場所に移行されます。サンプルテストは、Nightwatchでの最初のテストを開始するために、Nightwatchフォルダーに追加されます。

プロジェクトでschematicを実行すると、プロジェクトでこれらの変更が表示されます。

Folder changes

  1. 次に、既存のテストをNightwatchに変更する必要があります。まず、アサーション、Expect、ページオブジェクト、およびAPIコマンドから始めることができます。

  2. このガイドにはいくつかの例を追加しましたが、詳細については、/api/をご覧ください。

特定のブラウザでテストを実行するなど、詳細については、Nightwatch Schematicドキュメントをご覧ください。

DOMの操作

DOM要素の取得

単一要素の取得

e2eテストでは、Webページで最も一般的な操作の1つは、1つ以上のHTML要素を取得することです。Nightwatchでは、すべてが以前と同じように機能するため、ここで変更を加える必要はありません。

以前：Protractor

javascript
// Find an element using a css selector.
element(by.css('.myclass'))

以後：Nightwatch v2

javascript
// Find an element using a css selector.
element(by.css('.myclass'))
複数要素の取得

ページ上の複数の要素にアクセスする必要がある場合は、.all()メソッドを連鎖させる必要があります。ただし、Nightwatchでは、browser.findElementsを使用できます。

以前：Protractor

javascript
// Find elements using a css selector.
element.all(by.css('.myclass'))

以後：Nightwatch v2

javascript
// Find mulltiple elements using a css selector.
browser.findElements(by.css('.myclass'))

// or simply:
browser.findElements('.myclass')
DOM要素とのインタラクション

以前：Protractor

javascript
// Click on the element
element(by.css('button')).click()

// Clear the text in an element (usually an input).
element(by.css('input')).clear()

// Check the first checkbox on a page
element.all(by.css('[type="checkbox"]')).first().click()

// Scroll an element into view
browser
  .actions()
  .mouseMove(element(by.id('my-id')))
  .perform()

以後：Nightwatch v2

javascript
// Click on the element
browser.click(element(by.css('button')))

// or with default css selector as locate strategy:
browser.click('button')

// Clear the text in an element (usually an input).
browser.clearValue('input')

// Check the first checkbox on a page
// Nightwatch by default search for first element, and perform click event if there are multiple element present
browser.click('[type="checkbox"]')

// Scroll an element into view
browser.moveToElement(element(by.id('my-id'), 0, 0))

// or, using the actions api:
browser
  .perform(function() {
    return this.actions().mouseMove(element(by.id('my-id')))
  })

DOM要素の操作の詳細については、公式ドキュメントをご覧ください。

アサーション

長さ

以前：Protractor

javascript
const list = element.all(by.css('.custom-class'))
expect(list.count()).toBe(3)

以後：Nightwatch v2

javascript
expect.elements('.custom-class').count.to.equal(3);

値

以前：Protractor

javascript
expect(element(by.css('input[name="first_name"]'))).getAttribute('value').toBe('foo')

以後：Nightwatch v2

javascript
expect(element('input[name="first_name"]')).attribute('value').toEqual('foo');

テキストコンテンツ

以前：Protractor

javascript
// assert the element\'s text content is exactly the given text
expect(element(by.id('user-name')).getText()).toBe('John Doe')

以後：Nightwatch v2

javascript
expect.element(by.id('user-name')).text.toEqual('John Doe');

可視性

以前：Protractor

javascript
// assert button is visible
expect(element(by.css('#main ul li a.first')).isDisplayed()).toBe(true)

以後：Nightwatch v2

javascript
expect('#main ul li a.first').to.be.visible;

// The following will end the test:
browser.assert.visible('#main ul li a.first');

// However this will just log the failure and continue:
browser.verify.visible('#main ul li a.first');

存在

以前：Protractor

javascript
// assert the spinner no longer exists
expect(element(by.id('loading')).isPresent()).toBe(false)

以後：Nightwatch v2

javascript
browser.assert.not.elementPresent(by.id('loading'))

CSS

以前：Protractor

javascript
// assert #main ul li a.first has css style "block" for "display" property
expect(element(by.css('#main ul li a.first')).getCssValue('display')).toBe('block')

以後：Nightwatch v2

javascript
browser.assert.cssProperty(by.css('#main ul li a.first'), 'display', 'block');

Webサイトのナビゲーション

テストでページにアクセスする必要がある場合は、次のコードを使用できます。

以前：Protractor

javascript
it('visits a page', () => {
  browser.get('/about')
  browser.navigate().forward()
  browser.navigate().back()
})

以後：Nightwatch v2

javascript
it('visits a page', () => {
  browser
    .navigateTo('/about')
    .forward()
    .back()
})

質問または問題がある場合

Nightwatch Angular Schematicに関する質問をしたり、問題を報告したりする最適な方法は、issueを開くことです。