自动化测试，让你上班拥有一杯咖啡的时间 | Day 4 - 利用工具录制脚本

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

昨天完成第一个测试後，今天要跟大家分享一个工具，如果你对於 CSS Selector 还不熟悉，可以到扩充功能使用 Cypress Scenario Recorder，可以帮你轻松录制脚本。但使用後的缺点是，选取元素的程序码不容易维护，因此建议选取元素可以自己写，推荐 金鱼都能懂的 CSS 选取器 让你的 CSS 变强

录制脚本

1. 到 Chrome 扩充功能搜寻 Cypress Scenario Recorder
   

2. 按下 Record 之後，即可开始在网页上操作画面
   

3. 结束後点选 Stop，再复制程序码即可。
   

4. 将脚本放在 cypress/integration 资料夹中

   describe('test_name', function() {
   
    it('what_it_does', function() {
   
       cy.visit('https://member.ithome.com.tw/login')
   
       cy.viewport(1440, 695)
   
       cy.visit('https://member.ithome.com.tw/login')
   
       cy.get('.logform > .form-base > form > .form-group > #account').click()
   
       cy.get('.logform > .form-base > form > .form-group > #account').type('account')
   
       cy.get('.logform > .form-base > form > .form-group > #password').type('password')
   
       cy.get('.container > .logform > .form-base > form > .btn-agree').click()
   
       cy.visit('https://member.ithome.com.tw/profile/account/163082/edit')
   
       cy.get('.container > #navbar > .nav > li > a').click()
   
       cy.visit('https://member.ithome.com.tw/login')
   
    })
   
   })
   

调整脚本

可以看到 cy.get('.logform > .form-base > form > .form-group > #account').click() 这选取元素的写法不好维护，打开 f12 後，可以观察这是用 css 写出来的，因此建议可以用id, class, 属性等等去选取元素，日後比较好维护程序码。

连假快乐！那我们下一篇见啦