从 Protractor 迁移到 Nightwatch

介绍

Protractor 是一个流行的用于 Angular 和 AngularJS 应用程序的端到端测试框架。但是，Protractor 将 不再与 Angular 12 及更高版本的 Angular 项目一起提供。本迁移指南将帮助您轻松地将团队从 Protractor 迁移到 Nightwatch。

入门

安装 Nightwatch Angular schematic 以将 Nightwatch 添加到您的 Angular 项目中。

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。首先，您可以从 断言、期望、页面对象 和 API 命令 开始。

  2. 我们在本指南中添加了一些示例，但如果您需要更多信息，请访问：/api/

查看我们的 Nightwatch Schematic 文档，了解有关在特定浏览器中运行测试等更多详细信息。

使用 DOM

获取 DOM 元素

获取单个元素

在 e2e 测试中，网页中最常见的操作之一就是获取一个或多个 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');

浏览网站

当您需要在测试中访问某个页面时，可以使用以下代码

之前：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 相关的问题的最佳方法是 打开一个问题.