本記事はcypress10.1.0にて検証しています。(9以前とは結構書き方が変わっていますので注意しましょう。）
インストール
|
1 |
yarn add -D cypress |
package.jsonに起動コマンドを追加
|
1 2 3 4 |
"scripts": { "cy:open": "cypress open", "cy:run": "cypress run" }, |
cypress open
初回起動時はこれで起動することで設定ファイルなどを自動生成することができます。
また、実際にブラウザ上で動きを見ながらE2Eテストを実行することができます。
cypress run
コマンドライン上でE2Eテストをバックグラウンドで実行してくれます。
ターミナルで以下のコマンドを実行
|
1 |
yarn cypress |
そうするとcypressの設定ファイルなどが自動生成されます。
設定
cypress/e2e/(任意のファイル名).spec.cy.ts
任意のファイルを作ります。以下のような記述をします。
|
1 2 3 4 5 6 7 8 9 10 11 |
describe("empty spec", () => { // 以下はitを実行する前に共通で実行する処理になります。 beforeEach(() => { cy.visit("http://localhost:3000"); }); it("passes", () => { cy.get('[id="player"]').should("be.visible"); }); }); export {}; // TypeScriptの場合これがないとエラーになります。 |
実行方法
- Next.jsのローカルサーバーを事前に起動しておく。（Next.jsであれば「yarn dev」など）
- 「yarn cypress」でcypress起動
- cypressのUI上の「Specs」の「(任意のファイル名).spec.cy.ts」をクリックし、実行します。
この記事へのコメントはありません。