Cypress - 定位器

Cypress 只支援使用層疊樣式表 (CSS) 選擇器來識別元素。但是，藉助“Cypress-Xpath”外掛，它也可以使用 xpath。

讓我們考慮一段 html 程式碼片段，並瞭解一些 css 表示式的規則。

CSS 表示式規則

層疊樣式表 (CSS) 表示式的規則如下：

• 使用屬性 id 和標籤名的語法為 tagname#id - 此處，css 表示式應為 -input#gsc-i-id1。

• 使用屬性 class 和標籤名的語法為 tagname.class - 此處，css 表示式應為 - input.gsc-input。

• 使用任何屬性值和標籤名的語法為 tagname[attribute='value' - 此處，css 表示式應為 - input[title='search']。

• 使用父到子遍歷的語法為 parent child - 此處，css 表示式應為 -tr td。

Cypress 提供了“開啟選擇器遊樂場”的功能，我們可以從中自動定位和識別元素。此功能位於測試執行器視窗內，如下面的影像中突出顯示。

單擊“開啟選擇器遊樂場”後，會出現一個箭頭。單擊它並將其移動到我們必須識別的元素上。css 表示式將填充到箭頭右側的 cy.get 欄位中。

同時，元素將被突出顯示，如下面的影像所示：