🦭
テストを自動化する#1｜Playwright/Javascriptのサンプルコード
Playwrightでのテスト自動化に使えるJavascriptのコードです。
今回取り上げている内容
要素の表示・非表示を確認したい
HTMLで記述している場合、bodyに該当のテキストが表示されていることを確認します。
test.spec
// 要素が表示されていることを確認
await expect(page.locator('body')).toContainText('テストテキスト');
// 要素が表示されていないことを確認
await expect(page.locator('body')).not.toContainText('テストテキスト');
過去に以下のコードを試しましたが、うまく動かなかったので現在保留中です。
test.spec
await expect(page.locator('text=テストテキスト')).toBeVisible();
bodyに特定のテキストが2つ存在することを確認したい
先ほどのコードは要素が表示されていること・表示されていないことを確認するものですが、特定のテキストが2つ存在することを確認するには以下のコードが有効です。
＜使用場面＞
- 同じ操作を行い、テキスト（テキストをもつ要素）が2つ表示されていることを確認したい
- コピーの操作を行って、コピー元のものとコピーしたもの両方が表示されていることを確認したい
test.sしたい
// constで「確認するテキスト部分」を指定
const formElements = page.locator('body >> text="テストテキスト"');
// constのformElementsが2つ存在することを確認
await expect(formElements).toHaveCount(2);
現在日時（年/月/日/時/分/秒）を取得して文字列にしたい（メソッド化）
テスト毎に重複しないデータ（文字列）を生成したいときに使用すると便利です。
test.spec
const generateString = (): string => {
// new Date（現在日時）を取得して、定数currentDateとして定義する
const currentDate = new Date();
// 取得した定数currentDateから、記号部分を除く
const formattedDate = currentDate.toISOString().replace(/[-:.TZ]/g, "");
// const generateStringの戻り値をformattedDateに定義する
return formattedDate;
}
以下のコードを記述すると生成した文字列を実際に入力できるようになります。
test.spec
const Id = generateString();
// 例）入力欄１に生成した文字列を入力する
await page.getByPlaceholder('入力欄１').fill(Id);
Discussion