Loading...

​​Cypress.io 線上分享會

​​Intro

​​優勢

• ​​e2e 測試框架

• ​​具有更多符合操作邏輯的API

• ​​內建&整合更多常用的 e2e testing 功能，像是截圖、錄影等

• ​​自動等待動畫、disabled等狀態，直到穩定才運行

• ​​不是直接使用Selenium，而是開啟瀏覽器後內嵌一隻功能強大的test runner

• ​​Dashboard功能，可以與CI直接整合

​​缺點

• ​​目前只支援 Chrome、Electron 系列瀏覽器；其他瀏覽器的支援開發中

• ​​一隻測試只支援一個domain下的操作，跨多個domain會有CORS問題

​​Using Cypress.io

​​安裝 Cypress

​​yarn add cypress --dev

​​

​​執行 Cypress

1. ​​修改 package.json 的 scripts 區塊

​​"cypress:open": "cypress open"

​​

2. ​​執行 cypress

​​npm run cypress:open

​​

​​第一個測試案例

1. ​​[Add] cypress/intergration/app/app.spec.js

​​/// <reference types="Cypress" />

​​context('App test', () => {

​​  beforeEach(() => {

​​    cy.visit('http://localhost:4200');

​​  });

​​  it('should display welcome message', () => {

​​    cy.get('app-root h1').contains('Welcome to app!')

​​  });

​​});

​​

2. ​​執行伺服器

​​npm start

​​

​​語法支援 TypeScript

​​https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

​​

1. ​​安裝套件

​​yarn add @bahmutov/add-typescript-to-cypress --dev

2. ​​[Update] cypress/plugins/index.js

​​const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')

​​module.exports = on => {

​​  on('file:preprocessor', cypressTypeScriptPreprocessor)

​​}

​​3.  [Add] cypress/tsconfig.json

​​{