網站與 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');
基於替代文字
替代文字在頁面中的媒體中很常見。您可以使用基於替代文字的方法輕鬆找到此類元素。
// 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');
基於標籤的輸入
有時，表單輸入可能不包含文字或佔位符文字，但可能包含如下所示的標籤
您可以使用基於標籤的方法輕鬆找到與標籤 `First Name` 相關的輸入元素
// 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);
建議的下一步
現在您了解了選擇器，您可以使用它們來編寫指令和斷言。