iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Software Development

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

自動化測試,讓你上班擁有一杯咖啡的時間 | Day 30 - 學習cypress intercept 與後記

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

終於來到鐵人賽第30天!謝謝觀看我的文章和留言的所有人,第一次參加鐵人賽,每天早上都要提醒自己發文,比賽過程中遇到兩個連假,深怕自己會撐不到30天,感謝自己無數個深夜和清晨的努力,才能夠順利的完成比賽。

今天要跟大家分享 cy.intercept(),在 Cypress 6.0.0 後就不再使用 cy.server()cy.route()

使用 cy.intercept() 在網路層管理 HTTP 請求的行為。

  • 對 network requests 和 responses 進行 stub 或 spy
  • 在將 HTTP request 送到 server 之前可以修改 body, herders, URL 等等

method

可以用 GET, POST, PUT, PATCH, DELETE 等等

cy.intercept('/users')
// matches this: GET http://localhost/users
// ...and this, too: POST http://localhost/users

cy.intercept('GET', '/users')
// matches this: GET http://localhost/users
// ...but not this: POST http://localhost/users

url

可以用完整的 URL 或正規表示法

cy.intercept('https://prod.cypress.io/users')
// match any request that exactly matches the URL

cy.intercept('/users?_limit=*')
// match any request that satisfies a glob pattern

cy.intercept(/\/users\?_limit=(3|5)$/)
// match any request that satisfies a regex pattern
  1. 語法

    // spying only
    cy.intercept(url)
    cy.intercept(method, url)
    cy.intercept(routeMatcher)
    
  2. 動手寫程式

    describe('測試intercept', function() {
        it('url用法', function() {
            cy.intercept('https://www.thsrc.com.tw/Event/LanguageSettings.json')
        })
        it('method用法', function() {
            cy.intercept('GET', 'https://www.thsrc.com.tw/Event/LanguageSettings.json', {
                statusCode: 200,
            })
        })
    })
    

    https://ithelp.ithome.com.tw/upload/images/20211014/2014088347mwwbPmQh.png
    https://ithelp.ithome.com.tw/upload/images/20211014/201408837Isx0F8bA5.png

最後跟大家分享導入 Cypress 的價值,有機會你也可以試試看自動化測試。

  1. 因官網的文件豐富,學習曲線較低
  2. 可以累積過往的測試案例
  3. 可以記錄測試結果,並將測試的過程錄製下來,輸出成可以量化的報告
  4. 可以整合 CI/CD 自動化測試
  5. 幫助測試人員找到系統的 bug

參考資料


上一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 29 - cypress 最佳實踐
系列文
你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 11:50:06

恭喜完賽/images/emoticon/emoticon12.gif

我要留言

立即登入留言