自动化测试，让你上班拥有一杯咖啡的时间 | 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,
           })
       })
   })
   

   
   

最後跟大家分享导入 Cypress 的价值，有机会你也可以试试看自动化测试。

1. 因官网的文件丰富，学习曲线较低
2. 可以累积过往的测试案例
3. 可以记录测试结果，并将测试的过程录制下来，输出成可以量化的报告
4. 可以整合 CI/CD 自动化测试
5. 帮助测试人员找到系统的 bug

参考资料

• https://docs.cypress.io/api/commands/intercept
• https://docs.cypress.io/api/commands/route
• https://docs.cypress.io/guides/guides/network-requests#Testing-Strategies