網站或網頁應用程式的指令

概觀

使用指令，您可以與網頁元素互動。在使用指令之前，必須先找到元素。請參考此指南，以瞭解如何使用選擇器尋找元素。指令可以分為 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') 設定元素的值屬性。

// 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 搭配運作

斷言