查找和交互 DOM 元素

概述

在端到端测试期间，查找页面上的元素是迄今为止最常见和最关键的功能之一。Nightwatch 提供了几种查找元素的技术，以及可扩展的断言框架来对它们执行验证。

从文档根目录搜索元素，使用 CSS 选择器或 XPath 选择器。您也可以使用其他定位器策略。查看Webdriver 文档了解更多信息。

元素在内部使用唯一的web 元素引用 ID标识。当与元素交互时，Nightwatch 在内部管理识别 ID 的步骤，并使用其自动重试机制在与元素交互或执行任何断言之前找到该元素。

元素重试
当与元素交互时，Nightwatch 会在尝试查找任何元素时轮询 DOM 一段时间。如果找不到该元素，则会抛出 NoSuchElementError 错误。

示例

在以下示例中，setValue 命令在内部执行元素查找，然后调用在 setValue 命令中设置的元素。

tests/sampleTest.js 
module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser
      .url('https://www.ecosia.org/')
      .setValue('input[type=search]', 'nightwatch')
      .click('button[type=submit]')
      .assert.containsText('.mainline-results', 'Nightwatch.js')
      .end();
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser
    .url('https://www.ecosia.org/')
    .setValue('input[type=search]', 'nightwatch')
    .click('button[type=submit]')
    .assert.containsText('.mainline-results', 'Nightwatch.js')
    .end();
},


export default ecosiaTest;

相对定位器

当难以构建所需元素的定位器，但可以轻松描述该元素相对于具有易于构建的定位器的另一个元素的空间位置时，这些定位器很有用。

如果要查找 username 字段下方的 password 字段，请使用以下示例

module.exports = {
  'Demo test ecosia.org': function (browser) {
    const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
    

    browser
      .navigateTo('https://archive.org/account/login')
      .setValue(passwordElement, 'password')
      .assert.valueEquals('input[type=password]', 'password');
  }
};

import {NightwatchTests} from 'nightwatch';


const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  const passwordElement = locateWith(By.tagName('input')).below(By.css('input[type=email]'));
  

  browser
    .navigateTo('https://archive.org/account/login')
    .setValue(passwordElement, 'password')
    .assert.valueEquals('input[type=password]', 'password');
},


export default ecosiaTest;

除了示例中的命令外，您还可以使用以下命令

  • above
  • below
  • toRightOf
  • toLeftOf
  • near
链接相对定位器

对于某些复杂布局，例如，元素可能存在于起始元素的上面和右侧，您可以链接相对定位器，如以下示例代码片段所示

locateWith(By.tagName('button'))
  .below(By.id('email')
  .toRightOf(By.css('#cancel')));

元素属性

如果需要更大的灵活性来定位和交互元素，则元素也可以指定为对象。对象定义必须至少包含 selector 属性。除了 selector 属性外，您还可以使用以下任何属性

  • selector - 元素选择器名称（例如：'#input-element'）
  • locateStrategy - 例如 'css 选择器'
  • index - 用于定位查询中返回多个元素时特定元素。通常，只使用第一个元素 (index = 0)，但使用 index 属性，您可以指定结果中的任何元素。
  • abortOnFailure - 用于在使用 waitForElement* 命令时覆盖此设置
  • timeout - 用于在使用 waitForElement* 命令或断言时覆盖默认超时
  • retryInterval - 用于在使用 waitForElement* 命令或断言时覆盖默认重试间隔
  • suppressNotFoundErrors - 一些元素命令（如 .click() 或 .getText()）如果找不到元素，会抛出 NoSuchElement 错误，导致测试失败。如果将此选项设置为 true，则会忽略此错误。

在前面的示例中，input[type=search] 元素选择器返回 3 个元素。如果您想使用第二个元素，请参见以下示例代码片段


module.exports = {
  'Demo test ecosia.org': function (browser) {
    browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch')
  }
};
import {NightwatchTests} from 'nightwatch';

const ecosiaTest: NightwatchTests = {
'Demo test ecosia.org': () => {
  browser.setValue({selector: 'input[type=search]', index: 1}, 'nightwatch');
},

推荐内容