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。

更新於: 2020年8月5日

454 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告