自动化测试，让你上班拥有一杯咖啡的时间 | Day 17 - 如何勾选元素

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

在 E2E 测试中，不仅有选取元素，点选按钮，常常我们也需要测试勾选。今天要跟大家分享如何选取单选、多选和全选。

1. 语法

   .check()
   .check(value)
   .check(values)
   .check(options)
   .check(value, options)
   .check(values, options)
   

2. 写脚本：这次用虾皮订购系统来做测试，依照筛选的条件查询商品。

   describe('测试勾选', function() {
       beforeEach(()=>{
           cy.visit('https://shopee.tw/search?keyword=3d%E5%8F%A3%E7%BD%A9&page=0') //到虾皮首页
         })
   
       it('应该要可以全选', function() {
           cy.get('[type="checkbox"]').check({ force: true }) //全选
       })
   
       it('应该要可以单选', function() {
           cy.get('[type="checkbox"]').check('1', { force: true }) //点选虾皮店到店-免运
       })
   
       it('应该要可以多选', function() {
           cy.get('[type="checkbox"]').check(['-1','-2'], { force: true }) //点选台湾和海外
       })
   })
   

   
   

3. .check(value, options) 的 options 可以用 { force: true } 来强制他要选到该元素

4. 提醒：只有 <input type="checkbox"> 和 <input type="radio"> 才能用 check()

参考资料

• https://docs.cypress.io/api/commands/check#Syntax