iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Software Development

你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress系列 第 7

自動化測試,讓你上班擁有一杯咖啡的時間 | Day 7 - 如何寫斷言

  • 分享至 

  • xImage
  •  

此系列文章會同步發文到個人部落格,有興趣的讀者可以前往觀看喔。

在測試腳本加上斷言後,當程式碼有 bug 時,一下就能被找出來。根據腳本的情境可以下幾種斷言,例如輸入錯誤應該要出現 xxx 訊息,填完資料某按鈕應該要出現。

寫斷言的方法有以下幾種:

  1. Implicit Subjects: 使用 .should().and()
  2. Explicit Subjects: 使用 .expect()

例如:

.should() 在點擊完按鈕,class name 應該要有 active:

cy.get('button').click().should('have.class', 'active')

.and() 可以一次寫多個斷言:

cy.get('#header a')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')

.expect()

cy.get('tbody tr:first').should(($tr) => {
  expect($tr).to.have.class('active')
  expect($tr).to.have.attr('href', '/users')
})

動手寫程式

describe("鐵人賽搜尋功能", function () {
    beforeEach(() => {
      cy.login({ userId: "account", password: "password" });
    })
  
    it("搜尋cypress後,應該要有文章", function () {
      cy.get('.menu__search-toggle').click({force: true});  //點選搜尋
      cy.get('.menu__search-input').type('cypress')  //搜尋cypress
      cy.get('#searchIronman').click({force: true,}); //選擇鐵人賽
      cy.get('.menu__dropform-btn').click({force: true}); //點選搜尋
      cy.get(".search-qa-list__title-link").contains("自動化測試,讓你上班擁有一杯咖啡的時間 ").should("be.visible"); //要有cypress文章
      cy.get('li > a').contains("登出").click({force: true}); //點選登出
    })
})

https://ithelp.ithome.com.tw/upload/images/20210921/20140883sYB5KdcVGc.png

腳本執行錯誤時,會提供明確的訊息。
https://ithelp.ithome.com.tw/upload/images/20210921/201408835fcGQUKdTA.png

參考資料

https://docs.cypress.io/guides/references/assertions#Adding-New-Assertions


上一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 6 - 使用 Custom Commands
下一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 8 - 用 beforeEach 歸納重複行為
系列文
你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言