为网站或 Web 应用程序编写测试

概述

Nightwatch 提供了简单而全面的 API，用于与 Web 元素交互，并执行各种操作和断言。在 Nightwatch v3 中，引入了全新的元素 API，使编写测试更加简单和简洁。

Nightwatch 检查器 使编写测试更容易，因为它提供了长期有效的选择器推荐。

如果您对编码了解甚少或没有编码经验，也可以使用我们的 Chrome 录制器扩展 来录制测试并使用 Nightwatch 运行它们。

查找元素

在您与元素交互或执行断言之前，您必须使用选择器从 DOM 树中查找元素。Nightwatch 支持多种选择器，使查找元素变得轻而易举。您可以使用 .find() 和 .findAll() 相关命令来完成此操作。

  1. CSS 选择器 :
    browser.element.find('css selector');
browser.element.findAll('css selector');
  2. xPath 选择器 :
    browser.element.find(by.xpath(('xpath string'));
browser.element.findAll(by.xpath(('xpath string'));
  3. 按角色 :
    browser.element.findByRole('role');
browser.element.findAllByRole('role');
  4. 按文本 :
    browser.element.findByText('text');
browser.element.findAllByText('text');
  5. 按占位符文本 :
    browser.element.findByPlaceholderText('placeholder text');
browser.element.findAllByPlaceholderText('placeholder text');
  6. 按标签文本 :
    browser.element.findByLabelText('label text');
browser.element.findAllByLabelText('label text');
  7. 按替代文本 :
    browser.element.findByAltText('alt text');
browser.element.findAllByAltText('alt text');

除了查找命令之外，Nightwatch 还提供了便利方法，这些方法可以帮助在更复杂的情况下查找方法。

  1. 查找元素数组中的第 n 个元素 .nth(index)
  2. 查找元素数组的数量 .count()

查找嵌套元素

在这一组强大的选择器之上，Nightwatch 还支持选择器链接。

browser.element.find('CSS selector').findByText('text').click();
// or
browser.element.findAll('CSS selector').nth(2).findByText('text').click();

有关选择器的更详细指南和示例，请参阅此 指南。

命令

找到元素后，您可以使用命令与它们进行交互。

交互命令

  1. 点击 :
    browser.element.find('selector').click();
  2. 双击 : 
    browser.element.find('selector').doubleClick();
  3. 右键单击 : 
    browser.element.find('selector').rightClick();
  4. 在输入框中键入内容 : 
    browser.element.find('selector').sendKeys('text');
  5. 设置值 : 
    browser.element.find('selector').setValue();
  6. 清除 : 
    browser.element.find('selector').clear();
除了 .find()，您还可以使用其他查找相关方法，例如 .findByText()、.findByRole()，然后加上命令。

获取元素详细信息

  1. 获取文本 :
    browser.element.find('selector').getText();
  2. 获取值 :
    browser.element.find('selector').getValue();
  3. 获取标签名称 :
    browser.element.find('selector').getTagName();
  4. 获取属性 :
    browser.element.find('selector').getAttribute();
  5. 获取 CSS 属性 :
    browser.element.find('selector').getCssProperty();
  6. 获取 ID :
    browser.element.find('selector').getId();
  7. 获取可访问性名称 :
    browser.element.find('selector').getAccessibilityName();
  8. 获取矩形 :
    browser.element.find('selector').getRect();

更新元素详细信息

  1. 设置文本 :
    browser.element.find('selector').setText('text');
  2. 设置属性 :
    browser.element.find('selector').setAttributes('attribute', 'attribute value');

设置浏览器上下文

  1. 设置地理位置 : 
    browser.setGeolocation({latitude: , longitude: , accuracy: 100});

有关详细示例，请参阅此 指南。

您也可以使用 Nightwatch 编写自定义命令。立即尝试

断言

编写自动化测试的主要目的是设置通过断言。使用 Nightwatch 进行断言有两种方法。

您可以使用内置断言。

  1. 文本等于 :
    browser.element.find('selector').getText().assert.equals('text');
  2. 文本包含 :
    browser.element.find('selector').getText().assert.contains('text');
  3. 文本匹配 :
    browser.element.find('selector').getText().assert.matches('regex');
  4. 值等于 :
    browser.element.find('selector').getValue().assert.equals('text');
  5. 值包含 :
    browser.element.find('selector').getValue().assert.contains('text');
  6. 值匹配 :
    browser.element.find('selector').getValue().assert.matches('regex');
  7. URL 等于 :
    browser.assert.urlEquals('text');
  8. URL 包含 :
    browser.assert.urlContains('text');
  9. URL 匹配 :
    browser.assert.urlMatches('regex');
  10. 可见 :
    browser.element.find('selector').assert.visible();
如果这些断言不足，您可以编写自己的自定义断言。了解如何操作

Chai 预期

如果您喜欢 Chai 风格的断言，也可以使用 expect() 来执行断言。

  1. 文本等于 :
    expect(element).text.to.equal();
  2. 文本包含 :
    expect(element).text.to.contain();
  3. 文本等于 :
    expect(element).text.to.match();
  4. 值等于 :
    expect(element).value.to.equal();
  5. 值包含 :
    expect(element).value.to.contain();
  6. 值等于 :
    expect(element).value.to.match();
  7. URL 等于 :
    expect(brower.url()).to.equal();
  8. URL 包含 :
    expect(brower.url()).to.contain();
  9. URL 匹配 :
    expect(brower.url()).to.match();
  10. 可见 :
    expect(element).to.be.visible();

有关断言的详细示例，请参阅此 文章

使用 Nightwatch 检查器

Nightwatch 检查器是一个点按式工具，旨在节省您编写测试的时间，并帮助您编写更持久性的测试。它还允许您从 devtools 本身尝试 Nightwatch 命令。了解更多。

使用 Chrome dev 工具录制

或者，Nightwatch 提供了工具来帮助您入门，这些工具可以录制您在屏幕上的测试操作，并自动生成 Nightwatch 测试脚本，而无需编写任何代码。探索使用 Google Chrome DevTools 录制器 创建 Nightwatch 测试以了解更多信息。

现在您已经了解了为移动应用程序编写测试的基础知识，是时候更详细地了解选择器、命令和断言了。

选择器
命令
断言