Cypress basics: Selecting elements

Selecting a single element

語(yǔ)法：

cy.get('.selector')

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

頁(yè)面代碼如下：

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

我們可以使用 h1 標(biāo)簽選擇一個(gè)元素。 如果我們想選擇我們的一個(gè)形狀，我們可以使用類(lèi)、id 或?qū)傩詠?lái)選擇單個(gè)元素。

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

要按類(lèi)選擇元素，您需要使用 . 前綴并通過(guò)它選擇一個(gè)元素，你應(yīng)該在 id 前面加上#。 您可能會(huì)在頁(yè)面上找到的最常見(jiàn)屬性是輸入的占位符，甚至是測(cè)試 ID，其中您的選擇器以方括號(hào)開(kāi)始和結(jié)束。 如果選擇我們選擇在我們的頁(yè)面上多次找到的元素，例如我們的 div 元素，Cypress 將選擇所有三個(gè)。

Select elements by filtering

這是一個(gè)比較有用的操作。

一旦你選擇了多個(gè)元素（例如通過(guò) .get(‘li’) 命令，它返回 7 個(gè)元素），你可以根據(jù)另一個(gè)選擇器在這些元素中進(jìn)行過(guò)濾。 下面的代碼將只選擇紅色、綠色和藍(lán)色，因?yàn)檫@些是原色并且它們有一個(gè)類(lèi) .primary。

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

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

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

Finding elements

您可以通過(guò)首先選擇要在其中搜索的元素來(lái)指定選擇器，然后向下查看 DOM 結(jié)構(gòu)以找到您要查找的特定元素。

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

如果您已經(jīng)在使用屬性來(lái)標(biāo)記您的元素，這里有一個(gè)提示。 您可以創(chuàng)建一個(gè)自定義命令，該命令將通過(guò)例如選擇您的元素 數(shù)據(jù)-cy 屬性：

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

消費(fèi)：

cy.getById('indigo')

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

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

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。