Cypress basics: Selecting elements

Selecting a single element

語法：

cy.get('.selector')

首先，讓我們看看 .selector 部分的內容。 Cypress 通過查詢 DOM 來選擇元素。 如果您曾經玩過 CSS 或使用過 jQuery，或者如果您熟悉 JavaScript 中的 document.querySelector 命令，您可能已經熟悉此類選擇器。 讓我們看看這是什么意思。 作為一個例子，我們可以查看一個看起來像這樣的頁面：

頁面代碼如下：

<h1>Shapes:</h1> <div class="square"></div> <div id="circle"></div> <div shape="triangle"></div>

我們可以使用 h1 標簽選擇一個元素。 如果我們想選擇我們的一個形狀，我們可以使用類、id 或屬性來選擇單個元素。

cy.get('h1') // select by tag.get('.square') // select by class.get('#circle') // select by id.get('[shape="triangle"]'); // select by attribute

要按類選擇元素，您需要使用 . 前綴并通過它選擇一個元素，你應該在 id 前面加上#。 您可能會在頁面上找到的最常見屬性是輸入的占位符，甚至是測試 ID，其中您的選擇器以方括號開始和結束。 如果選擇我們選擇在我們的頁面上多次找到的元素，例如我們的 div 元素，Cypress 將選擇所有三個。

Select elements by filtering

這是一個比較有用的操作。

一旦你選擇了多個元素（例如通過 .get(‘li’) 命令，它返回 7 個元素），你可以根據另一個選擇器在這些元素中進行過濾。 下面的代碼將只選擇紅色、綠色和藍色，因為這些是原色并且它們有一個類 .primary。

cy.get('li').filter('.primary') // select all elements with the class .primary

要做完全相反的事情，您可以使用 .not() 命令。 使用此命令，您將選擇除紅綠藍之外的所有顏色。

cy.get('li').not('.primary') // select all elements without the class .primary

Finding elements

您可以通過首先選擇要在其中搜索的元素來指定選擇器，然后向下查看 DOM 結構以找到您要查找的特定元素。

cy.get('.list').find('.violet') // finds an element with class .violet inside .list element

如果您已經在使用屬性來標記您的元素，這里有一個提示。 您可以創建一個自定義命令，該命令將通過例如選擇您的元素 數據-cy 屬性：

Cypress.Commands.add('getById', (input) => {cy.get(`[data-cy=${input}]`)})

消費：

cy.getById('indigo')

下圖是 SAP 電商云 Spartacus UI Cypress 的一個例子：

在使用 click 方法觸發 continue button 點擊事件之前，我們先得檢查其是否處于可點擊狀態，即 disabled 屬性必須為 null.

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Cypress 基础 - 元素的定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。