自动化测试，让你上班拥有一杯咖啡的时间 | Day 9 - 如何上传图片

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

在 E2E 测试中，不仅有选取元素，点选按钮，常常我们也需要上传档案或图片。今天要教大家在测试脚本中如何上传图片。

动手写程序

输入 npm install --save-dev cypress-file-upload 後，在 package.json 档可以看到 cypress-file-upload
在 cypress/command.js 中加上 import 'cypress-file-upload';
cypress 会从 fixtures 中找测试图片，因此在 fixtures/images 放要上传的图片

在测试脚本主要要写上

 const filepath = 'images/avataaars.png' //定义照片路径
 cy.get('#uploadButton').attachFile(filepath) //上传档案
 cy.get('#InsertImg').click() //点选插入图片

完整程序码

 describe("测试铁人赛上传图片", function () {
   beforeEach(()=>{
     cy.visit("https://ithelp.ithome.com.tw/");
     cy.login({ userId: "account", password: "password" });
   })

   afterEach(()=>{
     cy.get('li > a').contains("登出").click({force: true,}); //点选登出
   })

   it("点选铁人赛发文後，应该要可以上传图片", function () {
     cy.get('.menu__ironman-btn').click({force: true,}); //点选铁人赛发文
     cy.get('.group__badge--software-dev').click({force: true,}); //点选主题
     cy.get('.post-header__title').type("测试上传图片"); //输入标题
     cy.get('.fa-upload').click({force: true,}); //点选上传图片icon
     cy.get('.upload').click({force: true,}); //点选上传图片

     const filepath = 'images/avataaars.png' //定义照片路径
     cy.get('#uploadButton').attachFile(filepath) //上传档案
     cy.get('#InsertImg').click() //点选插入图片
     cy.get('.save-group__btn').click({force: true,}); //点选储存草稿
   })
 })