5 元素互動

? ? 元素識別和操作是UI自動化測驗的基礎，下面一起來學習一下在Cypress中的元素互動操作吧，

5.1 元素定位器選擇

? ? 每一個測驗用例都包含對元素的定位識別和操作等，因為一個好的測驗用例，必須保證健壯和可靠的元素定位策略，在實際專案中，經常會遇到以下問題：

元素ID或類是動態生成
若使用CSS定位，而在實際開發程序中CSS或JS行為發生更改等

? ? 為避免出現以上失敗情況，我們可以采取以下策略

不建議使用基于CSS屬性的定位方式，如id, class, tag
不建議使用基于易發生變化的文本內容
添加data-*屬性，使其更加容易定位元素

Cypress提供三個data-*屬性，分別是data-cy、data-test、data-testid

? ? 我們來看一個示例：

<button
  id="main"
  
  name="submission"
  role="button"
  data-cy="submit"
>
  Submit
</button>

? ? 我們來看看以下幾種常見的元素定位方式：

定位方式	是否推薦	備注
cy.get('button').click()	不推薦	錯誤的定位方式，太簡單，沒有結合背景關系
cy.get('.btn.btn-large').click()	不推薦	CSS耦合性太高
cy.get('#main').click()	慎用	仍然依賴于CSS或JS事件（JS可以動態生成button）
cy.get('[name=submission]').click()	慎用	與HTML中name屬性耦合性太高
cy.contains('Submit').click()	可以使用	與文本內容耦合性比較高，若文本發生變化，則失敗
cy.get('[data-cy=submit]').click()	推薦	不依賴任何變更

data-*是Cypress提供的專有定位器,僅用于定位，且 data-*屬性與元素的行為或樣式無關，也就意味著即樣式和行為發生變化，也不影響測驗而出現失敗的情況產生，更詳細的檔案可以查看官網介紹：https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

? ? 除了Cypress專有定位選擇器外，在不滿足data-*選擇器時，也可以使用以下幾種定位選擇器：

1、id選擇器

cy.get('#main').click()

2、class選擇器

cy.get('.btn.btn-large').click()

3、attributes選擇器

cy.get('[name=submission]').click()

4、:nth-child(n)選擇器

? ? :nth-child(n)選擇器匹配屬于其屬于父元素的第n個子元素且不管元素型別，

<form method="post" action="/post">
   <p>Customer name: <input name="custname"></p>
   <p>Telephone: <input type="tel" name="custtel"></p>
   <p>E-mail address: <input type="email" name="custemail"></p>
   <p>Delivery instructions: <textarea name="comments"></textarea></p>
   <p><button>Submit order</button></p>
</form>

? ? 針對以上HTML代碼片斷使用nth-child(n)選擇器定位代碼如下所示：

cy.get('p:nth-child(1) > input').type("Surpass")

5、Cypress.$ 選擇器

? ? 針對一些比較難定位的元素，Cypress也可以使用jQuery選擇器來進行元素定位，示例代碼如下所示：

/// <reference types="cypress" />

describe('測驗jQuery定位器', () => {
    let baseUrl="https://www.baidu.com/";
    before(()=>{
        cy.visit(baseUrl);
    });
    it('測驗jQuery定位器用例-1', () => {
         let searchTextA="I love",searchTextB=" Surpass",searchButtonText="百度一下";
         cy.get("#kw").type(searchTextA).should("contain.value",searchTextA);
         let $el=Cypress.$("#kw")
         let selectorA=Cypress.SelectorPlayground.getSelector($el)
         cy.get(selectorA).type(searchTextB).should("contain.value",searchTextB)
         cy.get(selectorA).clear();
         let $elSearch=Cypress.$("#su")
         let selectorB=Cypress.SelectorPlayground.getSelector($elSearch);
         cy.get(selectorB).should("contain.value",searchButtonText);
    });
});

使用Cypress.$定位參考資料：https://docs.cypress.io/api/cypress-api/selector-playground-api#onElement-Callback

5.2 DOM互動

5.2.1 頁面元素查找

5.2.1.1 基本方法

? ? 在Cypress常見的用于頁面內元素查找的方法如下所示：

5.2.1.1.1 find方法

? ? find主要用于查找DOM 樹中被定位元素的后代，其基本語法如下所示：

.find(selector)
.find(selector, options)

? ? 示例HTML片斷如下所示：

<ul id="parent">
  <li ></li>
  <li ></li>
</ul>

? ? 其用法如下所示：

cy.get('#parent').find('li')

5.2.1.1.2 get方法

? ? get主要用于查找一個或多個DOM元素，其基本語法如下所示：

cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

? ? 其用法如下所示：

// 查找input元素
cy.get('input').should('be.disabled')
// 查找li的第一個元素且屬于ul的后代
cy.get('ul li:first').should('have.class', 'active')
// 查找dropdown-menu元素并單擊
cy.get('.dropdown-menu').click()
// 查找屬性為test-example的元素
cy.get('[data-test-id="test-example"]').should('have.length', 5)
// 查找href屬性中包含questions的元素
cy.get('a[href*="questions"]').click()
// 支持正則，查找以local-開頭的元素
cy.get('[id^=local-]')
// 支持正則，查找以-remote結尾的元素
cy.get('[id$=-remote]')
// 支持正則，查找以local-開頭和以-remote結尾的元素
cy.get('[id^=local-][id$=-remote]')

5.2.1.1.3 contains方法

? ? contains主要用于查找包含特定文本的元素，其基本語法如下所示：

.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)

// ---or---

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

content

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的第一個包含apples的元素
cy.contains('apples')

value

? ? 示例HTML片斷如下所示：

<div id="main">
  <form>
    <div>
      <label>name</label>
      <input name="name" />
    </div>
    <div>
      <label>age</label>
      <input name="age" />
    </div>
    <input type="submit" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/submit the form!" />
  </form>
</div>

? ? 其用法如下所示：

cy.get('form').contains('submit the form!').click()

Number

? ? 示例HTML片斷如下所示：

<button  type="button">
  Messages <span >4</span>
</button>

? ? 其用法如下所示：

// 查找搜索到的第一個元素包含的數值
cy.contains(4)

正則

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
</ul>

? ? 其用法如下所示：

// 查找搜索<li>bananas</li>
cy.contains(/^b\w+/)

selector

? ? 示例HTML片斷如下所示：

<html>
  <body>
    <ul>
      <li>apples</li>
      <li>oranges</li>
      <li>bananas</li>
    </ul>
  </body>
</html>

? ? 其用法如下所示：

// 查找搜索<ul>...</ul>
cy.contains('ul', 'apples')

subject

? ? 示例HTML片斷如下所示：

<form>
  <div>
    <label>name</label>
    <input name="name" />
  </div>
  <button type="submit">Proceed</button>
</form>

? ? 其用法如下所示：

cy.get('form') // 查找搜索 <form>...</form>
  .contains('form', 'Proceed') // 查找搜索 <form>...</form>
  .submit()  // 查找搜索 <form>...</form>

options

? ? 示例HTML片斷如下所示：

<div>Capital Sentence</div>

? ? 其用法如下所示：

cy.get('div').contains('capital sentence') // fail
cy.get('div').contains('capital sentence', { matchCase: false }) // pass

5.2.1.2 擴展方法

? ? 因WEB技術不斷更新發展，導致其應用程式也不斷變得復雜，單一手機的定位方法可能滿足不了要求，Cypress也提供一些擴展方法，用于更加精準定位元素，如下所示：

5.2.1.2.1 children方法

? ? children用于獲取指定DOM集合頁面中每個DOM的子元素，其基本語法如下所示：

.children()
.children(selector)
.children(options)
.children(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>About</li>
  <li>
    Services
    <ul >
      <li >Web Design</li>
      <li >Logo Design</li>
      <li >
        Print Design
        <ul >
          <li>Signage</li>
          <li>T-Shirt</li>
          <li>Business Cards</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Contact</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 [
//  <li >Web Design</li>,
//  <li >Logo Design</li>,
//  <li >Print Design</li>
// ]
cy.get('ul.secondary-nav').children()

selector

? ? 示例HTML片斷如下所示：

<div>
  <ul>
    <li >Unit Testing</li>
    <li>Integration Testing</li>
  </ul>
</div>

? ? 其用法如下所示：

// 查找搜索到的結果為[ <li >Unit Testing</li> ]
cy.get('ul').children('.active')

5.2.1.2.2 parents方法

? ? parents用于獲取指定DOM集合頁面中每個DOM的父元素，即以當元素為起點，一直到最頂級，其基本語法如下所示：

.parents()
.parents(selector)
.parents(options)
.parents(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul >
  <li>Overview</li>
  <li>
    Getting started
    <ul >
      <li>Install</li>
      <li >Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 [.sub-nav, li, .main-nav]
cy.get('li.active').parents()

selector

? ? 示例HTML片斷如下所示：

<ul >
  <li>Overview</li>
  <li>
    Getting started
    <ul >
      <li>Install</li>
      <li >Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為[.main-nav]
cy.get('li.active').parents('.main-nav')

5.2.1.2.3 parent方法

? ? parent用于獲取指定DOM集合頁面中每個DOM的第一層父元素即以當元素為起點，僅向上找一級（即找到爸爸輩即可），其基本語法如下所示：

.parent()
.parent(selector)
.parent(options)
.parent(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul >
  <li>Overview</li>
  <li>
    Getting started
    <ul >
      <li>Install</li>
      <li >Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 .sub-nav
cy.get('li.active').parent()

selector

? ? 示例HTML片斷如下所示：

<ul >
  <li>Overview</li>
  <li>
    Getting started
    <ul >
      <li>Install</li>
      <li >Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為.sub-nav
cy.get('li').parent('.sub-nav')

5.2.1.2.4 siblings方法

? ? siblings用于獲取指定DOM頁面中同層級元素即以當元素為起點，查找同級別元素（即找到兄弟輩即可），其基本語法如下所示：

.siblings()
.siblings(selector)
.siblings(options)
.siblings(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>Home</li>
  <li>Contact</li>
  <li >Services</li>
  <li>Price</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為[<li>Home</li> <li>Contact</li> <li>Price</li> ]
cy.get('.active').siblings()

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li>Home</li>
  <li>Contact</li>
  <li >Services</li>
  <li>Price</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li >Services</li>
cy.get('li').siblings('.active')

5.2.1.2.5 first方法

? ? first用于獲取指定DOM頁面中第一個元素，其基本語法如下所示：

.first()
.first(options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li >Knick knack on my thumb</li>
  <li >Knick knack on my shoe</li>
  <li >Knick knack on my knee</li>
  <li >Knick knack on my door</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li >Knick knack on my thumb</li>
cy.get('li').first()

5.2.1.2.6 last方法

? ? last用于獲取指定DOM頁面中最后一個元素，其基本語法如下所示：

.last()
.last(options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li >Knick knack on my thumb</li>
  <li >Knick knack on my shoe</li>
  <li >Knick knack on my knee</li>
  <li >Knick knack on my door</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li >Knick knack on my door</li>
cy.get('li').last()

5.2.1.2.7 next方法

? ? next用于獲取指定DOM頁面中同層級元素的下一個元素，即以當前元素為起點，向下查找一個元素，其基本語法如下所示：

.next()
.next(selector)
.next(options)
.next(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li >oranges</li>
  <li>bananas</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li>bananas</li>
cy.get('.second').next()

? ? 來看看以下的示例驗證程式看看會不會被繞暈，哈哈，如下所示：

<input list="fruit" />
<datalist id="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cantaloupe</option>
</datalist>

cy.get('#fruit option')
  .first()
  .should('have.text', 'Apple')
  .next()
  .should('have.text', 'Banana')
  .next()
  .should('have.text', 'Cantaloupe')

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li >pineapples</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li>pineapples</li>
cy.get('li').next('.selected')

5.2.1.2.8 nextAll方法

? ? nextAll用于獲取指定DOM頁面中匹配元素后的所有同層級元素，即以當前元素為起點，查找后續所有同層級元素，其基本語法如下所示：

.nextAll()
.nextAll(selector)
.nextAll(options)
.nextAll(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li >oranges</li>
  <li>bananas</li>
  <li>pineapples</li>
  <li>grapes</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為[<li>bananas</li>, <li>pineapples</li>, <li>grapes</li>]
cy.get('.second').nextAll()

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li >pineapples</li>
  <li>grapes</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 <li>pineapples</li>
cy.get('li').nextAll('.selected')

5.2.1.2.9 nextUntil方法

? ? nextUntil用于獲取指定DOM頁面中指定范圍內的所有同層級元素，即以當前元素為起點，向后查找，遇到until指定的元素截止前的所有同層級元素，其基本語法如下所示：

.nextUntil(selector)
.nextUntil(selector, filter)
.nextUntil(selector, filter, options)
.nextUntil(element)
.nextUntil(element, filter)
.nextUntil(element, filter, options)

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li id="fruits" >Fruits</li>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li id="veggies" >Vegetables</li>
  <li>cucumbers</li>
  <li>carrots</li>
  <li>corn</li>
  <li id="nuts" >Nuts</li>
  <li>walnuts</li>
  <li>cashews</li>
  <li>almonds</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 [<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
cy.get('#veggies').nextUntil('#nuts')

5.2.1.2.10 prev方法

? ? prev用于獲取指定DOM頁面中同層級元素的上一個元素，即以當前元素為起點，向上查找一個元素，其基本語法如下所示：

.prev()
.prev(selector)
.prev(options)
.prev(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>Cockatiels</li>
  <li>Lorikeets</li>
  <li >Cockatoos</li>
  <li>Conures</li>
  <li>Eclectus</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為<li>Lorikeets</li>
cy.get('.active').prev()

? ? 示例HTML片斷如下所示：

<ul>
  <li>Cockatiels</li>
  <li>Lorikeets</li>
  <li >Cockatoos</li>
  <li>Conures</li>
  <li>Eclectus</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 <li>Cockatoos</li>
cy.get('li').prev('.active')

5.2.1.2.11 prevAll方法

? ? prevAll用于獲取指定DOM頁面中匹配元素前的所有同層級元素，即以當前元素為起點，查找前面所有同層級元素，其基本語法如下所示：

.prevAll()
.prevAll(selector)
.prevAll(options)
.prevAll(selector, options)

不帶引數

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li >bananas</li>
  <li>pineapples</li>
  <li>grapes</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 [<li>apples</li>, <li>oranges</li>]
cy.get('.third').prevAll()

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li >pineapples</li>
  <li>grapes</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為 <li>pineapples</li>
cy.get('li').prevAll('.selected')

prevAll查找前面所有同級元素，但如果添加了selector，則代表僅選擇一個

5.2.1.2.12 prevUntil方法

? ? prevUntil用于獲取指定DOM頁面中指定范圍內的所有同層級元素，即以當前元素為起點，向前查找，遇到until指定的元素截止前的所有同層級元素，其基本語法如下所示：

.prevUntil(selector)
.prevUntil(selector, filter)
.prevUntil(selector, filter, options)
.prevUntil(element)
.prevUntil(element, filter)
.prevUntil(element, filter, options)

selector

? ? 示例HTML片斷如下所示：

<ul>
  <li id="fruits" >Fruits</li>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li id="veggies" >Vegetables</li>
  <li>cucumbers</li>
  <li>carrots</li>
  <li>corn</li>
  <li id="nuts" >Nuts</li>
  <li>walnuts</li>
  <li>cashews</li>
  <li>almonds</li>
</ul>

? ? 其用法如下所示：

// 查找搜索到的結果為[<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
cy.get('#nuts').prevUntil('#veggies')

5.2.1.2.13 each方法

? ? each用于遍歷帶有length屬性的物件，如陣列等，其基本語法如下所示：

.each(callbackFn)

? ? 其用法如下所示：

// 遍歷每個li
cy.get('ul>li').each(() => {...})
cy.get('li')
  .should('have.length', 3)
  .each(($li, index, $lis) => {
    return 'something else'
  })
  .then(($lis) => {
    expect($lis).to.have.length(3) // true
  })

5.2.1.2.14 eq方法

? ? eq用于獲取指定索引的元素（類似于nth-child(n)），其基本語法如下所示：

.eq(index)
.eq(indexFromEnd)
.eq(index, options)
.eq(indexFromEnd, options)

正向index

? ? 示例HTML片斷如下所示：

<ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>

? ? 其用法如下所示：

cy.get('li').eq(1).should('contain', 'siamese') // true

索引起始值為0

反向index

? ? 示例HTML片斷如下所示：

<ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>

? ? 其用法如下所示：

cy.get('li').eq(-2).should('contain', 'sphynx') // true

5.2.1.2.15 filter方法

? ? filter用于獲取匹配到的元素，其基本語法如下所示：

.filter(selector)
.filter(selector, options)

**selector*

? ? 示例HTML片斷如下所示：

<ul>
  <li>Home</li>
  <li >About</li>
  <li>Services</li>
  <li>Pricing</li>
  <li>Contact</li>
</ul>

? ? 其用法如下所示：

// 搜索到的結果為： <li>About</li>
cy.get('ul').find('>li').filter('.active')

contains-按文本

? ? 示例HTML片斷如下所示：

<ul>
  <li>Home</li>
  <li>Services</li>
  <li>Advanced Services</li>
  <li>Pricing</li>
  <li>Contact</li>
</ul>

? ? 其用法如下所示：

// 搜索到的結果為（包含Services的元素）： <li>Services</li> <li>Advanced Services</li>
cy.get('li').filter(':contains("Services")').should('have.length', 2)

contains-非空格

? ? 示例HTML片斷如下所示：

<div data-testid="testattr">
  <span>Hello&nbsp;world</span>
</div>

? ? 其用法如下所示：

cy.get('[data-testid=testattr]').filter(':contains("Hello\u00a0world")')

5.3 可操作型別

5.3.1 click方法

? ? click主要用于單擊元素，其基本語法如下所示：

.click()
.click(options)
.click(position)
.click(position, options)
.click(x, y)
.click(x, y, options)

? ? option常見引數如下所示：

position(String)

? ? center是postion的默認位置，其他有效postion有：topLeft、top、topRight、left、center、right、bottomLeft、bottom、bottomRight，其示意圖如下所示：

x(Number)

? ? 元素離左邊(left)的距離，單位為像素

y(Number)

? ? 元素離上面(top)的距離，單位為像素

options(Object)

選項	默認值	備注
altKey	false	是否激活Alt鍵，別名為：optionKey
ctrlKey	false	是否激活Ctrl鍵，別名為：controlKey
shiftKey	false	是否激活Shift鍵
metaKey	false	如果是Windwos，是否激活Win鍵，如果是Mac，是否激活Command鍵，另外為：commandKey, cmdKey
multiple	false	連續點擊多個元素
force	false	強制單擊，忽略其元素狀態

無引數

? ? 其用法如下所示：

cy.get('.nav > a').click()

position

? ? 其用法如下所示：

cy.get('img').click('topRight')

坐標

? ? 其用法如下所示：

cy.get('#top-banner').click(15, 40)

options

? ? 其用法如下所示：

cy.get('.close').as('closeBtn')
cy.get('@closeBtn').click({ force: true })
cy.get('#footer .next').click(5, 60, { force: true })
// 點擊所有以btn開頭的元素
cy.get('[id^=btn]').click({ multiple: true })

組合單擊

? ? 在單擊時，可以結合Alt、Ctrl、Shift、Win/Command鍵等，其用法如下所示：

// 使用Shift+Click
cy.get('li:first').click({
  shiftKey: true,
})

除了使用這種來組合單擊方式外，也可以type()

5.3.2 dbclick方法

? ? dbclick主要用于雙擊元素，其基本語法如下所示：

.dblclick()
.dblclick(options)
.dblclick(position)
.dblclick(position, options)
.dblclick(x, y)
.dblclick(x, y, options)

? ? option常見引數如下所示：

position(String)

x(Number)

? ? 元素離左邊(left)的距離，單位為像素

y(Number)

? ? 元素離上面(top)的距離，單位為像素

options(Object)

選項	默認值	備注
altKey	false	是否激活Alt鍵，別名為：optionKey
ctrlKey	false	是否激活Ctrl鍵，別名為：controlKey
shiftKey	false	是否激活Shift鍵
metaKey	false	如果是Windwos，是否激活Win鍵，如果是Mac，是否激活Command鍵，另外為：commandKey, cmdKey
multiple	true	連續點擊多個元素
force	false	強制單擊，忽略其元素狀態

無引數

? ? 其用法如下所示：

cy.get('a#nav1').dblclick()

position

? ? 其用法如下所示：

cy.get('button').dblclick('bottom')

坐標

? ? 其用法如下所示：

cy.get('button').dblclick(30, 10)

options

? ? 其用法如下所示：

cy.get('button').dblclick({ force: true })
cy.get('button').dblclick('topRight', { force: true })
cy.get('button').dblclick({ multiple: false })

組合單擊

? ? 在雙擊時，可以結合Alt、Ctrl、Shift、Win/Command鍵等，其用法如下所示：

// 使用Shift+Click
cy.get('li:first').dblclick({
  altKey: true,
})

5.3.3 rightclick方法

? ? rightclick主要用于在元素上右擊，其基本語法如下所示：

.rightclick()
.rightclick(options)
.rightclick(position)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

? ? option常見引數如下所示：

position(String)

x(Number)

? ? 元素離左邊(left)的距離，單位為像素

y(Number)

? ? 元素離上面(top)的距離，單位為像素

options(Object)

選項	默認值	備注
altKey	false	是否激活Alt鍵，別名為：optionKey
ctrlKey	false	是否激活Ctrl鍵，別名為：controlKey
shiftKey	false	是否激活Shift鍵
metaKey	false	如果是Windwos，是否激活Win鍵，如果是Mac，是否激活Command鍵，另外為：commandKey, cmdKey
multiple	false	連續點擊多個元素
force	false	強制單擊，忽略其元素狀態

無引數

? ? 其用法如下所示：

cy.get('#open-menu').rightclick()

position

? ? 其用法如下所示：

cy.get('#open-menu').rightclick('topRight')

坐標

? ? 其用法如下所示：

cy.get('#open-menu').rightclick(15, 40)

options

? ? 其用法如下所示：

cy.get('#open-menu').rightclick({ force: true })
cy.get('#open-menu').rightclick('bottomLeft', { force: true })
cy.get('#open-menu').rightclick(5, 60, { force: true })
cy.get('.open-menu').rightclick({ multiple: true })

組合單擊

? ? 在雙擊時，可以結合Alt、Ctrl、Shift、Win/Command鍵等，其用法如下所示：

// 使用Shift+Click
cy.get('.menu-item').rightclick({
  metaKey: true,
})

5.3.4 type方法

? ? type主要用于在元素物件輸入內容，其基本語法如下所示：

.type(text)
.type(text, options)

? ? type除了可以任意文本內容，也可以輸入特定的文本，表示一些特殊的功能，如下所示：

項	功能描述
{{}	輸入 {
{backspace}	洗掉游標左側字符
{del}	洗掉游標右側字符
{upArrow}	向上移動游標
{downArrow}	向下移動游標
{leftArrow}	向左移動游標
{rightArrow}	向右移動游標
{home}	移動游標至行首
{end}	移動游標至行尾
{enter}	按Enter鍵
{esc}	按ESC鍵
{insert}	在游標右側插入字符
{moveToEnd}	移動游標至可輸入物件的結尾處
{moveToStart}	移動游標至可輸入物件的開頭處
{pageDown}	向下滾動
{pageUp}	向上滾動
{selectAll}	通過創建范圍來全選所有文本
{alt}	激活Alt鍵
{ctrl}	激活Ctrl鍵
{meta}	如果是Windows，則激活Win鍵，如果是Mac，則激活Command鍵
{shift}	激活Shift鍵

? ? option常見引數如下所示：

選項	默認值	備注
delay	10	在按下按鍵后的延遲時間，單位為ms
force	false	強制輸入，忽略其元素狀態
parseSpecialCharSequences	true	是否決議{}中包含特定字串
release	true	是否保持長按

輸入文本

? ? 其用法如下所示：

cy.get('textarea').type('Hello Surpass')

從datalist中選擇輸入

? ? 示例HTML片斷如下所示：

<input list="fruit" />
<datalist id="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cantaloupe</option>
</datalist>

? ? 其用法如下所示：

cy.get('input').type('Apple')

使用組合鍵輸入

? ? 其用法如下所示：

// 相當于人按Shift、Alt，再按住b鍵
cy.get('input').type('{shift+alt+b}hello')

忽略特定的字符

? ? 如果想輸入{}這樣的字符，可以使用選項parseSpecialCharSequences

cy.get('#code-input')
  // 將不再決議{}里面的字符
  .type('function (num) {return num * num;}', {
    parseSpecialCharSequences: false,
  })

5.3.5 clear方法

? ? type主要用于清除輸入的文本內容，其基本語法如下所示：

.clear()
.clear(options)

? ? option常見引數如下所示：

選項	默認值	備注
force	false	強制清除，忽略其元素狀態

無引數

? ? 其用法如下所示：

cy.get('textarea').clear().type('Hello, Surpass')

5.3.6 check方法

? ? chekck主要用于選中單選框和復選框，其基本語法如下所示：

.check()
.check(value)
.check(values)
.check(options)
.check(value, options)
.check(values, options)

value可以是String也可以是Array，符合條件，則全部選中，

? ? option常見引數如下所示：

選項	默認值	備注
force	false	強制選中，忽略其元素狀態

選中復選框

cy.get('[type="checkbox"]').check()

選中單選框

cy.get('[type="radio"]').check()

根據value(String)選中

? ? 示例HTML片斷如下所示：

<form>
  <input type="radio" id="ca-country" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/CA" />
  <label for="ca-country">Canada</label>
  <input type="radio" id="us-country" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/US" />
  <label for="us-country">United States</label>
</form>

? ? 其用法如下所示：

cy.get('[type="radio"]').check('US')

根據value(Array)選中

? ? 示例HTML片斷如下所示：

<form>
  <input type="checkbox" id="subscribe" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/subscribe" />
  <label for="subscribe">Subscribe to newsletter?</label>
  <input type="checkbox" id="acceptTerms" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/accept" />
  <label for="acceptTerms">Accept terms and conditions.</label>
</form>

? ? 其用法如下所示：

cy.get('form input').check(['subscribe', 'accept'])

選擇隱藏的Checkbox

? ? 其用法如下所示：

cy.get('.action-checkboxes')
  .should('not.be.visible') // Passes
  .check({ force: true })
  .should('be.checked') // Passes

查找選中的Checkbox

? ? 示例HTML片斷如下所示：

<form id="pick-fruit">
  <input type="radio" name="fruit" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/orange" id="orange" />
  <input type="radio" name="fruit" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/apple" id="apple" checked="checked" />
  <input type="radio" name="fruit" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/banana" id="banana" />
</form>

? ? 其用法如下所示：

cy.get('#pick-fruit :checked').should('be.checked').and('have.value', 'apple')

5.3.7 uncheck方法

? ? chekck主要用于取消選中單選框和復選框，其基本語法如下所示：

.uncheck()
.uncheck(value)
.uncheck(values)
.uncheck(options)
.uncheck(value, options)
.uncheck(values, options)

value可以是String也可以是Array，符合條件，則全部取消選中，

? ? option常見引數如下所示：

選項	默認值	備注
force	false	強制取消選中，忽略其元素狀態

取消選中復選框

cy.get(':checkbox').uncheck()

取消選中單選框

cy.get('input[type="ratio"]').uncheck()

根據value(String)取消選中

? ? 示例HTML片斷如下所示：

<form>
  <input type="radio" id="ca-country" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/CA" />
  <label for="ca-country">Canada</label>
  <input type="radio" id="us-country" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/US" />
  <label for="us-country">United States</label>
</form>

? ? 其用法如下所示：

cy.get('[type="radio"]').uncheck('US')

根據value(Array)取消選中

? ? 示例HTML片斷如下所示：

<form>
  <input type="checkbox" id="subscribe" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/subscribe" />
  <label for="subscribe">Subscribe to newsletter?</label>
  <input type="checkbox" id="acceptTerms" value="https://www.cnblogs.com/surpassme/archive/2022/09/14/accept" />
  <label for="acceptTerms">Accept terms and conditions.</label>
</form>

? ? 其用法如下所示：

cy.get('form input').uncheck(['subscribe', 'accept'])

5.3.8 select方法

? ? select主要用于選擇下拉串列中一個選項，其基本語法如下所示：

.select(value)
.select(values)
.select(value, options)
.select(values, options)

value可以是String，Number也可以是Array，符合條件，則全部選中，

? ? option常見引數如下所示：

選項	默認值	備注
force	false	強制選中其中一個項，忽略其元素狀態

根據Text選擇

? ? 示例HTML片斷如下所示：

<select>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/456">apples</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/457">oranges</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/458">bananas</option>
</select>

? ? 其用法如下所示：

cy.get('select').select('apples').should('have.value', '456')

根據Value選擇

? ? 示例HTML片斷如下所示：

<select>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/456">apples</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/457">oranges</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/458">bananas</option>
</select>

? ? 其用法如下所示：

cy.get('select').select('456').should('have.value', '456')

根據Index選擇

? ? 示例HTML片斷如下所示：

<select>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/456">apples</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/457">oranges</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/458">bananas</option>
</select>

? ? 其用法如下所示：

cy.get('select').select(0).should('have.value', '456')

選擇多個項

? ? 示例HTML片斷如下所示：

<select multiple>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/456">apples</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/457">oranges</option>
  <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/458">bananas</option>
</select>

? ? 其用法如下所示：

cy.get('select')
  .select(['apples', 'bananas'])
  .invoke('val')
  .should('deep.equal', ['456', '458'])
// 或
cy.get('select')
  .select([0, 1])
  .invoke('val')
  .should('deep.equal', ['456', '457'])

選擇隱藏的select

? ? 示例HTML片斷如下所示：

<select style="display: none;">
  <optgroup label="Fruits">
    <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/banana">Banana</option>
    <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/apple">Apple</option>
  </optgroup>

  <optgroup></optgroup>
</select>

? ? 其用法如下所示：

cy.get('select')
  .select('banana', { force: true })
  .invoke('val')
  .should('eq', 'banana')

選擇disabled的select

? ? 示例HTML片斷如下所示：

<select disabled>
  <optgroup label="Veggies">
    <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/okra">Okra</option>
    <option value="https://www.cnblogs.com/surpassme/archive/2022/09/14/zucchini">Zucchini</option>
  </optgroup>

  <optgroup></optgroup>
</select>

? ? 其用法如下所示：

cy.get('select')
  .select('okra', { force: true })
  .invoke('val')
  .should('eq', 'okra')

根據選中狀態進行選擇

? ? 示例HTML片斷如下所示：

<select id="name">
  <option>Joe</option>
  <option>Mary</option>
  <option selected="selected">Peter</option>
</select>

? ? 其用法如下所示：

cy.get('select#name option:selected').should('have.text', 'Peter')

5.3.9 trigger方法

? ? trigger主要用于在DOM觸發事件，其基本語法如下所示：

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, options)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, x, y, options)

滑鼠事件

// 滑鼠移動到button上觸發
cy.get('button').trigger('mouseover')
// 模擬長按
cy.get('.target').trigger('mousedown')
cy.wait(1000)
cy.get('.target').trigger('mouseup')

5.4 常見操作

5.4.1 visit方法

? ? visit主要用于訪問網址，其基本語法如下所示：

cy.visit(url)
cy.visit(url, options)
cy.visit(options)

? ? option常見引數如下所示：

選項	默認值	備注
url	null	要訪問的網址
method	GET	訪問網址的方法，僅限GET和POST
body	null	發送的請求體，如果是字串，則不做修改，如果是一個物件，將會進行URL Encode再發送， Content-Type: application/x-www-urlencoded
headers	{}	發送的請求頭
timeout	pageLoadTimeout	頁面加載超時時間
auth	{}	添加基本驗證請求頭
qs	null	URL查詢引數

? ? 常用示例如下所示：

常規用法

cy.visit('http://www.surpass.com')
// 添加頁面加載超時時間
cy.visit('http://www.surpass.com', { timeout: 30000 })
// 添加基本驗證頭
cy.visit('https://www.surpass.com/', {
  auth: {
    username: 'surpass',
    password: 'surpass',
  },
})
// 以上等同于：
cy.visit('https://surpass:[email protected]')
// 添加查詢引數
cy.visit('http://www.surpass.com/users', {
  qs: {
    username: 'surpass'，
    age:28,
  },
})
// 以上等同于：
cy.visit('https://www.surpass.com?username=surpass&age=28')

發送表單

cy.visit({
  url: 'http://www.surpass.com/login',
  method: 'POST',
  body: {
    name: 'surpass',
    email: '[email protected]',
  },
})

? ? 在實際專案中，通常主域名是不會發生變更的，一般變化較多的都是子域名，針對這種情況，Cypress可在cypress.json中配置baseUrl，在實際運行時，Cypress會自動加上，

{
  "baseUrl": "http://www.surpass.com"
}

? ? 在配置好baseUrl后，在使用cy.visit()寫法如下所示：

cy.visit("/register.html")

訪問本地檔案

? ? 如果不提供主機域名或baseUrl未定義時，Cypress默認會自動嘗試向服務器請求并訪問指定的檔案，那如果要訪問的是本地檔案，Cypress也提供了相應的方法，如下所示：

/// <reference types="cypress" />

describe('訪問本地檔案場景示例', () => {
    // 默認向服務器發起請求
   it('訪問百度', () => {
       cy.visit("www.baidu.com");
       cy.get("#kw").type("Surpass").should("contain.value","Surpass");
   });
   // 訪問本地檔案，注意路徑的寫法，以cypress.json所在的路徑為根路徑
    it('訪問本地檔案用例',{baseUrl: null }, () => {
        cy.visit("./cypress/integration/3-Surpass-Test-Examples/testSelect/surpass.test.html",);
        cy.get(":nth-child(1) > input").type("I love surpass")
    });
});

訪問本地檔案時，需要使用相對根目錄的路徑，其根目錄路徑為生成cypress.json所在路徑

? ? 運行結果如下所示：

5.4.2 url方法

? ? url主要用于獲取當前訪問頁面的URL地址，其基本語法如下所示：

cy.url()
cy.url(options)

? ? option常見引數如下所示：

選項	默認值	備注
decode	false	對URL進行解碼
timeout	defaultCommandTimeout	決議URL的超時時間

? ? 常用用法示例如下所示：

無引數

/// <reference types="cypress" />

describe("測驗URL方法",()=>{

    it('測驗用例-1', () => {
        cy.visit("https://www.baidu.com/");
        cy.url().should("contain","baidu");
        cy.visit("https://news.baidu.com");
        cy.url().should("contain","news.baidu.com");
    });
})

? ? 運行結果如下所示：

決議URL編碼

/// <reference types="cypress" />

describe("測驗URL方法",()=>{
    it.only('URL解碼測驗用例', () => {
        // 搜索關鍵詞中使用中文漢字
        let url="https://www.baidu.com/s?wd=%E6%B1%89";
        cy.visit(url);
        cy.url({decode:true}).should("contain","漢");
    });
})

? ? 運行結果如下所示：

decode主要用于URL中包含非ASCII字符

5.4.3 title方法

? ? title主要用于獲取當前訪問頁面的title，其基本語法如下所示：

cy.title()
cy.title(options)

? ? 常用用法示例如下所示：

cy.visit("https://www.baidu.com/");
cy.title().should("eq","百度一下，你就知道");

5.4.4 reload方法

? ? reload主要用于重新加載當前頁面，其基本語法如下所示：

cy.reload()
cy.reload(forceReload)
cy.reload(options)
cy.reload(forceReload, options)

forceReload (Boolean):該引數主要用于判斷是否從cache中加載頁面，若為true,則不使用cache，重新向服務器發起請求

? ? 常用用法示例如下所示：

無引數

cy.visit("https://www.baidu.com/");
cy.reload();

使用force引數

cy.visit("https://www.baidu.com/");
cy.reload(true);

5.4.5 設定視窗大小

? ? 在Cypress運行時，默認視窗大小1000px*660px，如果想自定義視窗大小，則Cypress提供了兩種設定視窗大小的方法，分別如下所示：

通過cypress.json設定

{
  "viewportWidth": 1920,
  "viewportHeight": 1080
}

在運行時設定設定

? ? 如果要在運行時設定視窗大小，需要使用viewport方法，，其基本語法如下所示：

cy.viewport(width, height)
cy.viewport(preset, orientation)
cy.viewport(width, height, options)
cy.viewport(preset, orientation, options)

? ? 常見引數如下所示：

width(Number)

? ? 視窗寬度，單位為像素，其值必須為有限的非負數

height(Number)

? ? 視窗高度，單位為像素，其值必須為有限的非負數

preset(String)

? ? 根據現有已知設備，快速設定視窗大小，現有已知設備大小如下所示：

orientation(String)

? ? 設定螢屏的方向，默認值為portrait（縱向），也可以設定為landscape（橫向）

? ? 常用用法示例如下所示：

設定視窗大小

cy.viewport(1920, 1080)

根據preset設定視窗大小

cy.viewport('iphone-6')

根據螢屏方向

cy.viewport('iphone-6', 'landscape')

使用Cypress設定視窗大小時，暫時不支持設定devicePixelRatio

5.4.6 前進和后退

? ? 在Cypress中對瀏覽器進行前進和后退的處理，是通過go方法來實作，其前進和后退依賴是瀏覽歷史中的URL記錄，其基本語法如下所示：

cy.go(direction)
cy.go(direction, options)

? ? 常見引數如下所示：

direction (String, Number)

? ? 表示后退主要使用back和-1
? ? 表示前進主要使用forward和1

? ? 常用用法示例如下所示：

前進

cy.go('forward')
cy.go(1)

后退

cy.go('back')
cy.go(-1)

5.4.7 元素可見/存在/不可操作

? ? 通過前面的學習，我們已經知道可以使用should進行斷言，但它也同時支持判斷元素是否可見、是否存在、是否可操作等，

元素是否可見

cy.get('nav').should('be.visible')

元素是否存在

cy.get('nav').should('not.exist')
cy.get('nav').should('exist')

元素是否可操作

cy.get(':checkbox').should('be.disabled')

5.4.8 then方法

? ? then方法主要用于獲取前一個命令的回傳值，我們可以利用該特性，來獲取元素的值，其基本語法如下所示：

.then(callbackFn)
.then(options, callbackFn)

? ? 以下常見的用法：

獲取元素文本值

cy.get("#su").then(($su)=>{
    let btnText=$su.attr("value");
    cy.log(`按鈕的文字是:${btnText}`);
});

? ? 運行結果如下所示：

5.4.9 clear方法

? ? clear方法主要用于清除ipnut輸入框和textarea中所輸入的文本內容，其基本語法如下所示：

.clear()
.clear(options)

? ? 以下常見的用法：

cy.get("#kw").type("I love Surpass").clear();
// 等價于
cy.get("#kw").type("I love Surpass").type("{selectall}{backspace}")

以上僅為Cypress提供的常用方法，更多方法可以查閱官方檔案：https://docs.cypress.io/api/table-of-contents

原文地址：https://www.jianshu.com/p/9a45af9fa2be

本文同步在微信訂閱號上發布，如各位小伙伴們喜歡我的文章，也可以關注我的微信訂閱號：woaitest，或掃描下面的二維碼添加關注：

作者： Surpassme

來源： http://www.jianshu.com/u/28161b7c9995/

http://www.cnblogs.com/surpassme/

宣告：本文著作權歸作者所有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文鏈接，否則保留追究法律責任的權利，如有問題，可發送郵件聯系，讓我們尊重原創者著作權，共同營造良好的IT朋友圈，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/507219.html

標籤：其他

上一篇：VSCODE 配置遠程除錯環境

下一篇：JMeter 邏輯控制之IF條件控制器

WEB自動化-05-Cypress-元素互動

5 元素互動

5.1 元素定位器選擇

5.2 DOM互動

5.2.1 頁面元素查找

5.2.1.1 基本方法

5.2.1.1.1 find方法

5.2.1.1.2 get方法

5.2.1.1.3 contains方法

5.2.1.2 擴展方法

5.2.1.2.1 children方法

5.2.1.2.2 parents方法

5.2.1.2.3 parent方法

5.2.1.2.4 siblings方法

5.2.1.2.5 first方法

5.2.1.2.6 last方法

5.2.1.2.7 next方法

5.2.1.2.8 nextAll方法

5.2.1.2.9 nextUntil方法

5.2.1.2.10 prev方法

5.2.1.2.11 prevAll方法

5.2.1.2.12 prevUntil方法

5.2.1.2.13 each方法

5.2.1.2.14 eq方法

5.2.1.2.15 filter方法

5.3 可操作型別

5.3.1 click方法

5.3.2 dbclick方法

5.3.3 rightclick方法

5.3.4 type方法

5.3.5 clear方法

5.3.6 check方法

5.3.7 uncheck方法

5.3.8 select方法

5.3.9 trigger方法

5.4 常見操作

5.4.1 visit方法

5.4.2 url方法

5.4.3 title方法

5.4.4 reload方法

5.4.5 設定視窗大小

5.4.6 前進和后退

5.4.7 元素可見/存在/不可操作

5.4.8 then方法

5.4.9 clear方法