iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Software Development

你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress系列 第 2

自動化測試,讓你上班擁有一杯咖啡的時間 | Day 2 - Cypress 環境設定

此系列文章會同步發文到個人部落格,有興趣的讀者可以前往觀看喔。

今天要教大家 Cypress 環境設定,跟著步驟一起做,就完成啦。

安裝 node.js

在 node.js 官網下載並安裝:https://nodejs.org/en/download/
https://ithelp.ithome.com.tw/upload/images/20210915/201408839daRkZibCK.png
https://ithelp.ithome.com.tw/upload/images/20210915/20140883G4ATa7gUad.png

產生 package.json 文件

  1. 在電腦新建一個資料夾 cypressDemo
  2. cd 到目錄: cd /your/project/path
  3. 執行指令 npm init
  4. 在資料夾就會產生 package.json
    https://ithelp.ithome.com.tw/upload/images/20210915/20140883KxkXSoUdn5.png

安裝 Cypress

  1. 在專案的目錄下執行指令 npm install cypress --save-dev
    https://ithelp.ithome.com.tw/upload/images/20210915/20140883Z2ZJDnUOjd.png

啟用 Cypress

  1. 在專案的目錄下執行指令 npx cypress open,啟動成功後,Cypress 會打開 Chrome 瀏覽器,可以看到 Cypress 提供的範例腳本,點下去就能開始跑腳本了。
    https://ithelp.ithome.com.tw/upload/images/20210915/20140883ZE4q6odMc3.png
    https://ithelp.ithome.com.tw/upload/images/20210915/20140883WDmVFZmJ3u.png

參考資料

下一篇會開始寫第一個測試,那我們明天見啦!


上一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 1 - 前言
下一篇
自動化測試,讓你上班擁有一杯咖啡的時間 | Day 3 - 開始寫第一個測試
系列文
你還在用手動測試嗎?30 天帶你學會前端自動化測試框架 - Cypress30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言