Cypressって何？

最近流行りのE2Eテストフレームワークになります。

スクレイピングライブラリのSeleniumと違い、完全にテストに特化したものになります。

~~もちろんCyと付いているが、Cygamesのものではない。~~

こんな画面をテストしてみる

フォーム上に名前を書いたら、一覧に入力した名前が追加されます。

そして名前を押すと、押した名前が画面に表示されます。

pic.twitter.com/tlvXMOwSuD
— サラサラヌラヌラ (@abumai09) November 29, 2022

コード

トップページ

import { FormEvent, useState } from 'react';
import { Link } from "react-router-dom";

export const Names = (): JSX.Element => {
const [name, setName] = useState("");

const [names, setNames] = useState([
    'じーさん',
    '孫',
    'ゲベ',
    '校長',
    '最強さん',
    'ちゃむらい'
]);

/**
 * 名前一覧の表示タグの生成
 * 
 * @returns {JSX.Element[]} 
 */
const generateDisplayedName = (): JSX.Element[] => {
    return names.map((name, i) =>
        <div id={`name-${i}`}>
            <Link to={`/name/${name}`}>
                {name}
            </Link>
        </div>
    );
}

/**
 * 入力欄の入力値が変更されたときにnameに入力内容を適用させる
 * 
 * @param event 入力イベント
 */
const handleChangName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
};

/**
 * フォームのサブミット
 * 
 * @param event サブミットイベント
 */
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setNames([...names, name]);
}

return (
    <div>
        <h1>名前一覧</h1>
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={name}
                name="name"
                onChange={handleChangName}
            />
            <input
                type="submit"
                value="名前の追加"
            />
        </form>
        <div className='names'>
            {generateDisplayedName()}
        </div>
    </div>
);
}

名前を押すと遷移するページ

import { useParams } from 'react-router-dom';

export const Name = () => {
const { name } = useParams<{ name: string }>();

return (
    <div className='name'>{name}</div>
);
}

Cypressのセットアップ

Cypressのインストール

npm install -D cypress

Cypressの設定画面を起動

package.jsonに設定画面を起動するスクリプトの追加

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

設定画面を起動

npm run cypress:open

起動中にこんなエラーが出たら

Missing baseUrl in compilerOptions. tsconfig-paths will be skipped

{
  "compilerOptions": {
    "baseUrl": "src"
  },
}

dri3 extension not supported.

GUIアプリケーションが動かせない環境下で動かすと異常のエラーが発生します。

そのため、GUIを動かせるようにしないといけません。

WSL2であれば、以下の記事を参考にしましょう。
https://zenn.dev/ktny/articles/f8b92e34602fae

管理画面起動後

E2Eテストを選択

Continueを選択して、設定ファイルを自動生成

好きなテスト環境を選択

Electronでテストを行う場合は、ブラウザの設定無しで動かすことができます。

E2Eテストをしてみる

describe('トップページ', () => {
    beforeEach(() => {
        cy.visit('http://localhost:3000/');
    });

    it('名前一覧に「じーさん」が表示されているか', () => {
        // #name-0のテキスト属性は、「じーさん」であるか？
        cy.get('#name-0').should('have.text', 'じーさん');
    });

    it('フォームに「曽山」と入力して、「曽山」が名前一覧に表示されているか', () => {
        // <input type="text" name="name" /> に「曽山」と入力
        cy.get('[name="name"]').type('曽山');
        // submitボタンを押す
        cy.get('form').submit();
        cy.get('#name-6').should('have.text', '曽山');
    });

    it('「じーさん」のページに遷移する', () => {
        // #name-0に対して、直接クリックしてもaタグをクリックした事にならず、画面遷移はしない。
        cy.get('#name-0').children('a').click();
        // URLの日本語は、エンコードされた文字列じゃないと、trueにならない。
        cy.url().should('include', '/name/%E3%81%98%E3%83%BC%E3%81%95%E3%82%93');
        cy.get('.name').should('have.text', 'じーさん');
    });
});

pic.twitter.com/eKQ2CYsp03
— サラサラヌラヌラ (@abumai09) November 29, 2022

最後に

Seleniumと違い、設定無しでE2Eテストの動作環境をElectronにできることはとても魅力的と感じました。

また、スクレイピング操作もSeleniumよりも簡単そうに感じました。

~~ま、俺様はSleniumは、にわかなんだけどな…..~~

今回Cypressを試したリポジトリ

E2EテストフレームワークのCypressとは？