[Cypress basics: Selecting elements](https://filiphric.com/cypress-basics-selecting-elements)

# Selecting a single element

語法：

```javascript
cy.get('.selector')
```

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

![](https://img-blog.csdnimg.cn/img_convert/8b559c78770e27f1bcbc924d98ad7629.png)

頁面程式碼如下：
```html
<h1>Shapes:</h1>
<div class="square"></div>
<div id="circle"></div>
<div shape="triangle"></div>
```

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

```javascript
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。

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

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

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

# Finding elements

您可以透過首先選擇要在其中搜尋的元素來指定選擇器，然後向下檢視 DOM 結構以找到您要查詢的特定元素。

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

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

```javascript
Cypress.Commands.add('getById', (input) => {

cy
    .get(`[data-cy=${input}]`)

})
```

消費：

```javascript
cy
  .getById('indigo')
```

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

![](https://img-blog.csdnimg.cn/img_convert/a04a76e6b809ed7976ef567afadb2959.png)

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

Cypress 基礎 - 元素的定位

相關文章