Guide

cypress

安裝

# 在已有項目中安裝 cypress
npm install cypress --save-dev

yarn add cypress

# 接著運行這個指令，cypress 將生成許多的範例
npx cypress open

• 資料夾結構說明：
  • fixtures
    • 放情境的測試資料，例如：帳號、密碼、會員資料等等
  • integration
    • 實際的情境案例規格檔案
  • plugins
    • 放一些外掛元件、方法等
  • support
    • index.js => 載入套件會寫在這邊
    • commands.js => 每次執行測試都會執行的檔案，裡面可以放一些共用的指令等等。例如：每次都需要做登入動作，就可以把登入寫成一個 Command 的方式使用
  • cypress.json

初部自已寫的東東

Html

<button class="test" @click="test">test</button>

test

describe("empty spec", () => {
  it("passes", () => {
    cy.visit("http://localhost:3000/");
    cy.get(".testd"); => fail
  });
});

一開始的時候還有不少範例可以看

https://rualc.com/frontend/cypress/#zi-xue-jiao-cai

https://github.com/briebug/cypress-schematic

https://ithelp.ithome.com.tw/articles/10222328