[Cypress]e2eでよく使う関数をまとめてみた

概要

最近Cypressを触る機会があったのでよく使う関数をまとめてみました。
またなにか覚えたら追記しようと思います。

よく使う関数

ページ遷移する

cy.visitでURLを指定してページ遷移します。

cy.vist('http://localhost')

cypress.config.tsにbaseUrlを指定していると、baseUrlからのサブディレクトリを指定してページ遷移できます。

cypress.config.ts

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost',
  },
});

cy.vist('/'); // 'http://localhost'に遷移する

要素を取得する

cy.getやcy.containsで要素を取得できます。

cy.get

cy.getでセレクタを指定して要素を取得できます。

cy.get('input')
cy.get('button')
cy.get('input')
cy.get('[type="radio"]')

もちろん、同一セレクタの要素が複数あれば複数個の要素が取得されます。
最初の1つを取得したいときはfirstが使えます。

cy.get('input').first()

2つ目以降を取得したいときはeqを使います。

cy.get('input').eq(0) // 1つ目
cy.get('input').eq(1) // 2つ目
cy.get('input').eq(2) // 3つ目

cy.contains

cy.containsを使うと引数に一致するテキストを持つ最初の要素が取得できます。
正規表現も使用可能です。

cy.contains('text')

以下のような場面で便利です。

• 特定のページが表示されてるかをタイトルなどで判断する
• クリックしたいリンクやボタンを中身のテキストで判断する
  • getと組み合わせるのもOK
• プルダウンメニューで特定の要素を選択する

要素を操作する

click, check, typeなどで要素を操作できます。

cy.get('button').first().click() // クリック
cy.get('[type="radio"]').first().check() // チェック
cy.get('input').first().type('ほげ') // テキスト入力

検証する

shouldを使うとレンダリングの結果を検証できます。

cy.contains('タイトル').should('exist');

ページの表示を待つ

ページ遷移の直後に要素を操作しようとすると、ページの表示が完了していないため操作に失敗することがあります。
そんなときは、should('be.visible')を使ってページの表示を待つことができます。

cy.contains('タイトル', { timeout: 10000 })
    .should('be.visible')
    .get('input', { timeout: 10000 })
    .should('be.visible')
    .then(() => {
        cy.get('input').eq(0).type('ほげ');
        cy.get('input').eq(1).type('ふが');
    });

ここではshould('be.visible')を2回書いてますが、

• contains('タイトル').should('be.visible')のみ
  • inputが表示されないため操作に失敗する
• get('input').should('be.visible')のみ
  • 遷移前のinputに対して操作しようとして失敗する

というようなことが頻発したのでこのようにしています。

ドメインをまたいで変数を保持する

現在のページとは異なるドメインのページに遷移すると、Cypressのテストコード上で定義した変数の中身が消えてしまいます。

let hoge: string;
it(() => {
    cy.visit('http://localhost')
    hoge = 'hoge';
});

it(() => {
    cy.visit('http://localhost:81')
    console.log(hoge) // 'hoge'が表示されずundefinedになる
});

こんなときはcy.taskを使用します。
認証のトークンを保持したいときなどに使うことになると思います。

使い方としては

• cypress.config.tsにtaskを定義する
• テストコードで定義した関数をcy.task経由で呼び出す

といった形になります。

cypress.config.ts

let value: string;

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        setValue(v: string) {
          value = v;
          return null;
        },
        getValue() {
          return value;
        },
      });
    },
  },
});

it(() => {
    cy.visit('http://localhost');
    cy.task('setValue', 'hoge');
});

it(() => {
    cy.visit('http://localhost:81');
    cy.task('getValue').then((value) => {
        console.log(value); // 'hoge'と表示される
    });
});

ちなみに、cy.taskについて検索するとplugins/index.tsで定義する方法がよく出てきますが、これは最新（v10.0.0以降）のCypressでは動かないので注意です。