iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

我不會測試,所以寫Jest與React Testing Library系列 第 26

Day 26: 出門前的Cypress 雜記

今天一早要出門,所以就大概講一下常用的一些小撇步以及昨天有講到的commands.

大家怎麼去抓取DOM元素

  1. cy.contains() → 搜尋字串 這個我就使用官網的例子當作範例
<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
</ul>
// yields <li>apples</li>
cy.contains('apples')

下面範例就比較特殊,他抓到的是button卻不是span,因為使用contains有prefer的優先權問題,把連結有放在下面.

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>
// yields <button>
cy.contains(4)

參考: 他有一個優先權的排行

  1. cy.get() → 主要搜尋選擇器(selector)的元素或者是alias的抓取
cy.get('input').should('be.disabled')

接下來是Custom commands

不僅僅寫程式可以有共用模組,寫測試也可以寫一個共用模組!!!

這邊就先講兩個

  1. Cypress.commands.add()
Cypress.Commands.add(name, options, callbackFn)

以之前範例,如果要取得token可以寫成
Cypress.Commands.add('getLocalstorage', (key) => {
  retrun cy.window().then((window) => window.localstorage.getItem(key))
})

之後要用就用 cy.getLocalstorage(token => {})
  1. Cypress.commands.overwrite() 哦 這個不一樣 這個是複寫原本內建的函式
Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
  if (options && options.sensitive) {
    // 關閉原先log
    options.log = false
    // 建立我們客製化log
    Cypress.log({
      $el: element,
      name: 'type',
      message: '*'.repeat(text.length),
    })
  }

  return originalFn(element, text, options)
})

那怎麼使用,大家可以看到sensitive設為true 所以overwrite裡面的if就會進去
cy.get('#password').type('superSecret123', { sensitive: true })

In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least trying to accomplish all of your wildest dreams in life - Smith

就聽一首,為連假劃下句點.


上一篇
Day 25: 那我們來用cypress call api吧
下一篇
Day 27:我們又回來了redux
系列文
我不會測試,所以寫Jest與React Testing Library30

尚未有邦友留言

立即登入留言