网站和 Web 应用选择器

概述

编写任何 Web 交互的第一步是找到一个元素。选择器用于从 DOM 树中找到元素。在 Nightwatch v3 中，选择器已升级，使查找元素变得更加简单。V3 还引入了 .find() 命令的链接，以便能够轻松地定位嵌套元素。

CSS 选择器

您可以使用 CSS 选择器轻松地在 DOM 树中查找元素。Nightwatch 支持多种类型的简单和复杂 CSS 选择器。一些常见示例包括

基于 ID
基于类
基于元素类的
嵌套

// Find an element which contains id = element-id
browser.element.find('#element-id');


// Find all elements with CSS class active
browser.element.findAll('.active');


// Find all <p> elements with class active
browser.element.find('p.active');


// Find element with class active nested within an element with id list
browser.element.find('#id > .active');

// Find an element which contains id = element-id
browser.element.find('#element-id');


// Find all elements with CSS class active
browser.element.findAll('.active');


// Find all <p> elements with class active
browser.element.find('p.active');


// Find element with class active nested within an element with id list
browser.element.find('#id > .active');

XPath 选择器

XPath 是一种查询语言，用于根据其位置和属性从 XML 文档中选择节点。您可以使用 XPath 在 DOM 树中定位元素。

// Find an element with XPath
browser.element.find(by.xpath('xpath string'))


// Find all elements with XPath
browser.element.findAll(by.xpath('xpath string'))

我们不建议使用 XPath 选择器，因为它可能会频繁地破坏您的测试

您可以了解更多关于 XPath 选择器的信息在此。

基于文本

基于文本的选择器是查找元素的非常自然的方式。

// Find an element with text 'Sign In'
browser.element.findByText('Sign In');


// Find all elements with text 'Sign In'
browser.element.findAllByText('Sign In');

// Find an element with text 'Sign In'
browser.element.findByText('Sign In');


// Find all elements with text 'Sign In'
browser.element.findAllByText('Sign In');

使用基于文本的选择器可能会在网站或 Web 应用具有国际化时出现问题

基于占位符文本

占位符文本在表单元素或搜索栏中很常见。让我们看看如何查找包含占位符文本“在此处搜索...”的元素

// Find the search bar with placeholder text 'Search here...'
browser.element.findByPlaceholderText('Search here...');


// Find all elements with placeholder text 'Enter here'
browser.element.findAllByPlaceholderText('Enter here');

// Find the search bar with placeholder text 'Search here...'
browser.element.findByPlaceholderText('Search here...');


// Find all elements with placeholder text 'Enter here'
browser.element.findAllByPlaceholderText('Enter here');

基于 alt 文本

alt 文本在页面中的媒体中很常见。您可以使用基于 alt 文本的方法轻松地查找此类元素。

// Find the element with alt text 'cat-image'
browser.element.findByAltText('cat-image');


// Find all elements with alt text 'cat-image'
browser.element.findAllByAltText('cat-image');

// Find the element with alt text 'cat-image'
browser.element.findByAltText('cat-image');


// Find all elements with alt text 'cat-image'
browser.element.findAllByAltText('cat-image');

基于标签的输入

有时，表单输入可能不包含文本或占位符文本，但可能包含标签，如下所示

Label

您可以使用基于标签的方法轻松地查找与标签“姓氏”相关的输入元素

// Find the input element associated with label 'First Name'
browser.element.findByLabelText('First Name');

// Find the input element associated with label 'First Name'
browser.element.findByLabelText('First Name');

选择第 n 个元素

如果您需要从元素列表中找到特定索引处的元素，Nightwatch 提供了一个便捷方法 .nth

// Find the 2nd element from all ul elements
browser.element.findAll('ul').nth(2);

// Find the 2nd element from all ul elements
browser.element.findAll('ul').nth(2);

概述