Cypress 中的各種定位器
Cypress 必須識別頁面上的元素才能對其執行操作。元素的唯一識別是透過 Cypress 使用 jQuery 選擇器完成的,jQuery 選擇器基本上是從 css 選擇器派生的。
其他自動化工具,如 Selenium,支援諸如 id、name、classname、link text、partial link text、xpath 和 css 選擇器之類的定位器。
編寫 css 選擇器的規則如下:
使用類名屬性。基於唯一類名的元素選擇是透過 (.) 符號完成的。自定義 css 表示式應為 (.classname)。
讓我們考慮以下 html 程式碼:
使用類名的自定義 css 應為:.gsc-input
使用 id 屬性。基於唯一 id 的元素選擇是透過 (#) 符號完成的。自定義 css 表示式應為 (#id)。
讓我們考慮以下 html 程式碼:
使用 id 的自定義 css 應為:#gsc-i-id1
使用標籤名以及 id 或類名屬性。基於唯一 id 的元素選擇是透過 (#) 符號完成的。自定義 css 表示式應為 (tagname#id)。
基於唯一類的元素選擇是透過 (.) 符號完成的。自定義 css 表示式應為 (tagname.classname)。
讓我們考慮以下 html 程式碼:
使用標籤名和 id 的自定義 css 應為:input#gsc-iid1。
使用標籤名和類名的自定義 css 應為:input.gsc-input。
使用標籤名以及任何屬性。元素選擇基於具有唯一值的任何屬性。自定義 css 表示式應為 (tagname[attribute='value'])。
讓我們考慮以下 html 程式碼:
使用標籤名、屬性及其值的自定義 css 應為:img[title='Tutorialspoint']
使用從父到子標籤名遍歷,並用空格分隔。自定義 css 表示式應為 (div input)。此處 div 分別指代父標籤和子標籤名。
讓我們考慮以下 html 程式碼:
使用空格分隔的父標籤名和子標籤名的自定義 css 應為:tr td。