今天一早要出門，所以就大概講一下常用的一些小撇步以及昨天有講到的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

就聽一首，為連假劃下句點．