Cypressって何？
最近流行りのE2Eテストフレームワークになります。
スクレイピングライブラリのSeleniumと違い、完全にテストに特化したものになります。
もちろんCyと付いているが、Cygamesのものではない。
こんな画面をテストしてみる
フォーム上に名前を書いたら、一覧に入力した名前が追加されます。
そして名前を押すと、押した名前が画面に表示されます。
— サラサラヌラヌラ (@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', 'じーさん');
});
});
— サラサラヌラヌラ (@abumai09) November 29, 2022
最後に
Seleniumと違い、設定無しでE2Eテストの動作環境をElectronにできることはとても魅力的と感じました。
また、スクレイピング操作もSeleniumよりも簡単そうに感じました。
ま、俺様はSleniumは、にわかなんだけどな…..
今回Cypressを試したリポジトリ