自动化测试，让你上班拥有一杯咖啡的时间 | Day 6 - 使用 Custom Commands

此系列文章会同步发文到个人部落格，有兴趣的读者可以前往观看喔。

你有没有遇到这种状况，在网站上几乎都需要先登入，才能操作功能，因此测试脚本需要写重复的登入程序码。这时可以把登入当作公共方法，写在 command.js，就能减少重复的程序码了。

custom commands 介绍

custom command 可以自定义 commands 或是 覆写现有的 commands。

语法

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

自定义command

1. 在执行脚本前，会先跑 cypress/support/commands.js 档案，因此可以在这里写登入的脚本。
   

   Cypress.Commands.add("login", ({ userId, password }) => {
       cy.get('.menu__item-link').contains("登入/注册").click({ force: true });
       cy.get('#account').type(userId, {force: true,});
       cy.get('#password').type(password, {force: true,});
       cy.get(".btn-agree").contains("登入").click({ force: true });
       cy.location("pathname").should("eq", "/");
   });
   

2. 到测试脚本写上 cy.login

   describe('测试铁人赛登入', function() {
     it('输入正确帐密後应该要可以登入', function() {
       cy.visit('https://member.ithome.com.tw/login') //到登入页
       cy.get('#account').type("jennifershih"); //输入帐号 
       cy.get('#password').type("secret1234567890"); //输入密码
       cy.get('.btn-agree').click({force: true,}); //点选登入
       cy.get(".account-fontsize").contains("jennifershih").should("be.visible"); //要有帐号
       cy.get('li > a').contains("登出").click({force: true,}); //点选登出
     })
   })
   

3. 执行脚本後，可以看到登入成功，但在 log 上会看到密码。
   

覆写 custom commands

当用 cy.type() 时，执行脚本会将输入的内容显示出来，但当输入的内容有机密如密码时，可以覆写 cy.type 的方法。

1. 以登入为例，在 cypress/support/command.js 加上

   Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
       if (options && options.sensitive) {
         // turn off original log
         options.log = false
         // create our own log with masked message
         Cypress.log({
           $el: element,
           name: 'type',
           message: '*'.repeat(text.length),
         })
       }
   
       return originalFn(element, text, options)
     })
   

   	cy.get('#account').type("account"); //输入帐号 
       cy.get('#password').type('secret1234567890', { sensitive: true }); //输入密码
   

2. 执行脚本後，在 log 上这时输入的密码会用********呈现。
   

参考资料

• https://on.cypress.io/custom-commands