网站或 Web 应用命令

概述

使用命令，您可以与 Web 元素进行交互。在使用命令之前，必须先找到元素。请参考此 指南 了解如何使用选择器查找元素。命令可以分为 4 个类别

  1. 元素交互
  2. 获取元素详细信息
  3. 更新元素详细信息
  4. 设置浏览器上下文

点击

要点击元素，只需使用 browser.element.find('selector').click()。

// Click on the sign in button
browser.element.findByText('Sign In').click();

// Click on the sign in button
browser.element.findByText('Sign In').click();

双击

要双击元素，您可以使用 browser.element.find('selector').doubleClick()。

// Double click on the sign in button
browser.element.findByText('Sign In').doubleClick();

// Double click on the sign in button
browser.element.findByText('Sign In').doubleClick();

右键点击

您可以使用 browser.element.find('selector').rightClick() 右键点击元素。

// Right click on the options button
browser.element.findByText('options').rightClick();

// Right click on the options button
browser.element.findByText('options').rightClick();

发送键

您可以通过使用 browser.element.find('selector').sendKeys('text') 在输入字段中键入值。您还可以传递文本数组而不是传递文本。要使用 Enter 或 Space 等键常量，您可以使用 browser.keys.CONSTANT_NAME。您可以在 此处 找到所有按键常量

// Type in 'Nightwatch' into input field search
browser.element.findByPlaceholderText('search').sendKeys('Nightwatch');


//or


// Type in 'John Doe' into the username field and press enter
browser.element.findByLabelText('username').sendKeys(['Nightwatch', browser.Keys.ENTER]);

// Type in 'Nightwatch' into input field search
browser.element.findByPlaceholderText('search').sendKeys('Nightwatch');


or

// Type in 'John Doe' into the username field and press enter
browser.element.findByLabelText('username').sendKeys(['Nightwatch', browser.Keys.ENTER]);

设置值

您可以使用 browser.element.find('selector').setValue('value') 设置元素的 value 属性。

// Set the value of input field search as 'Nightwatch'
browser.element.findByPlaceholderText('search').setValue('Nightwatch');

// Set the value of input field search as 'Nightwatch'
browser.element.findByPlaceholderText('search').setValue('Nightwatch');

清除

您可以使用 browser.element.find('selector').clear() 清除元素的值。

// Clear the value of input field search
browser.element.find('#search').clear();

// Clear the value of input field search
browser.element.find('#search').clear();

获取元素详细信息

您可以使用以下方法获取元素的详细信息

  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()
// Get the text of the header
browser.element.find('#header').getText();


// Get the value of the input field
browser.element.find('#input').getValue();


// Get the tag name of an element
browser.element.findByRole('link').getTagName();


// Get the style attribute of an element
browser.element.find('#element').getAttribute('style');


// Get the background-color of an element
browser.element.find('#element').getCssProperty('background-color');


// Get the id of an element
browser.element.find('#element').getId();


// Get the accessibility name of an element
browser.element.find('#element').getAccessibilityName();


// Get the rectangle bounding box of an element
browser.element.find('#element').getRect();

// Get the text of the header
browser.element.find('#header').getText();


// Get the value of the input field
browser.element.find('#input').getValue();


// Get the tag name of an element
browser.element.findByRole('link').getTagName();


// Get the style attribute of an element
browser.element.find('#element').getAttribute('style');


// Get the background-color of an element
browser.element.find('#element').getCssProperty('background-color');


// Get the id of an element
browser.element.find('#element').getId();


// Get the accessibility name of an element
browser.element.find('#element').getAccessibilityName();


// Get the rectangle bounding box of an element
browser.element.find('#element').getRect();

设置元素详细信息

在上一节中，您学习了如何获取元素的属性。您还可以使用以下方法设置元素的值

  1. 设置文本 - browser.element.find('selector').setText('text')
  2. 设置属性 - browser.element.find('selector').setAttributes('attribute', 'attribute value')
// Set the text of header as 'Nightwatch'
browser.element.find('#headeer').setText('Nightwatch');


// Set the style of button as "display:none;"
browser.element.find('#button').setAttribute('style','display:none;');

// Set the text of header as 'Nightwatch'
browser.element.find('#headeer').setText('Nightwatch');


// Set the style of button as "display:none;"
browser.element.find('#button').setAttribute('style','display:none;');

地理位置

您可以使用浏览器级方法 .setGeolocation() 来模拟来自特定纬度和经度的流量

// Set the latitude & longitude of the prime meridian
browser.setGeolocation({latitude: 51.4780, longitude: 0.0014, accuracy: 100})

// Set the latitude & longitude of the prime meridian
browser.setGeolocation({latitude: 51.4780, longitude: 0.0014, accuracy: 100})

自定义命令

如果现有的 Nightwatch 命令不能满足您的需求，或者您希望将一些复杂逻辑简化为单个命令，您甚至可以编写自己的自定义命令。请参考此 指南

现在您了解了选择器和命令，您可以继续了解断言在 Nightwatch 中是如何工作的

断言