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

就听一首，为连假划下句点．