自动化测试，让你上班拥有一杯咖啡的时间 | Day 22 - 与 JS-alert, confirm, prompt 如何互动

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

今天要跟大家分享当网站有用到Javascript Alert, Javascript Confirm, Javascript prompt时，要如何测试。

1. Javascript Alert: 警告用，会有一些文字和确认按钮
   

2. Javascript Confirm: 确认用，会有一些文字和确认/取消按钮
   

3. Javascript prompt: 输入文字用，会有一个输入框和确认/取消按钮
   

4. 动手写程序

   describe('JavaScript Alerts, Confirm, Prompt in Cypress', () => {
   
       beforeEach(() => {
           cy.visit('https://www.seleniumeasy.com/test/javascript-alert-box-demo.html')
       })
   
       it('JS Alert - 点选OK', () => {
           cy.get('.row > .col-md-6 > .panel:nth-child(4) > .panel-body > .btn').click() //点选按钮
           cy.on('window:alert', (str) => {
               expect(str).to.equal('I am an alert box!')
           }) //确认弹跳视窗的文字
           cy.on('window:confirm', () => true); //弹跳视窗点选确定
       })
   
       it('JS Confirm - 点选确定', () => {
           cy.get('.row > .col-md-6 > .panel:nth-child(5) > .panel-body > .btn').click() //点选按钮
           cy.on('window:confirm', (str) => {
               expect(str).to.equal(`Press a button!`) //确认弹跳视窗的文字
           })
           cy.on('window:confirm', () => true); //弹跳视窗点选确定
           cy.get('#confirm-demo').contains('You pressed OK!') //应该要有You pressed OK!
       })
   
       it('JS Confirm - 点选取消', () => {
           cy.get('.row > .col-md-6 > .panel:nth-child(5) > .panel-body > .btn').click() //点选按钮
           cy.on('window:confirm', () => false); //弹跳视窗点选取消
           cy.get('#confirm-demo').contains('You pressed Cancel!') //应该要有You pressed Cancel!
       })
   })
   

5. 结果
   

参考资料

• https://www.seleniumeasy.com/test/javascript-alert-box-demo.html
• https://docs.cypress.io/api/events/catalog-of-events#Window-Confirm