概要
最近Playwrightでテストコードを書くことが増えてきました。
API仕様から目的の操作を探すの大変、よく使うものはいつでも見直せるようにしたいと思い整理してみました。
こんなことないですか？
テストケースも決まりやりたいこともまとまっていて、目の前の画面に表示される要素をテストコードで操作したいだけなのにできない、なんでなん？と
手動では再現簡単なのに、テストコードとしてどう実現するか悩む時間が惜しい方に役立てばと思います。他にも実現手段はあると思いますが、あくまで一例です。
本記事は、APIをどう使うかに特化したものため、Playwrightを少し触ったことある人向けになります。
よく使うメモ
エレメントの指定方法
全体的に共通するのが目的のエレメントを指定する方法です。例えば、何らかのエレメントをクリックした場合の様々な指定方法
//class属性を指定する場合
await Page.ClickAsync(".hogehoge");
//Id属性を指定する場合
await Page.ClickAsync("#hogehoge");
//buttonタグのname属性を指定する場合
await Page.ClickAsync(@"button[name=""hogehoge""]");
//inputタグのid属性を指定する場合
await Page.ClickAsync(@"input[id=""hogehoge""]");
//複数存在するクラス名の1番目を指定する場合(※インデックスは1始まり)
await Page.ClickAsync(".hogehoge:nth-of-type(1)");
//特定の表示文字列をもつクラス名を指定する場合
await Page,ClickAsync($@".hogehoge:has-text(""部分一致もできます"")"))
基本操作
何かしたいときの基本操作
//何かをクリックしたいとき
await Page.ClickAsync("#hogehoge");
//何かを入力したいとき
await Page.FillAsync("#hogehoge", "test");
//何かをホバーしたいとき
await Page.HoverAsync("#hogehoge");
//何かをフォーカスしたいとき
await Page.FocusAsync("#hogehoge");
//何かをチェックしたい
await Page.CheckAsync("#hogehoge");
//何かをアンチェックしたい
await Page.UncheckAsync("#hogehoge");
//ファイルをアップロードしたい
await Page.SetInputFilesAsync("#hogehoge", "ファイルパス");
あるエレメントの表示/非表示
あるエレメントが表示/非表示になるまで待ちたい
//何かを待ちたい
//(第2引数のオプションで、attached, detached, visible, hiddenが選べるので表示を待ちたいのか非表示になるのを待ちたいのか利用シーンに合わせて)
await Page.WaitForSelectorAsync("#hogehoge", new PageWaitForSelectorOptions { State = WaitForSelectorState.Visible });
画面表示情報の取得
画面に表示される情報を取得したいときに使う
//チェックボックスのチェック状態を取得
await Page.IsCheckedAsync("#hogehoge")
//ある要素に表示されているテキストの取得
await Page.TextContentAsync("#hogehoge")
//入力したテキストの取得
await Page.InputValueAsync("#hogehoge");
//あるクラス名の要素を取得したい
await Page.QuerySelectorAsync("#hogehoge")
//あるクラス名の要素を一括取得したい
await Page.QuerySelectorAllAsync(".hogehoge")
//表示文字列から自身のエレメントのId属性を取得したい
await Page.GetByText("表示名称").GetAttributeAsync("id");
//ある要素のクラス名を取得したい
await Page.GetAttributeAsync("#hogehoge", "class");
selectの操作
ドロップダウンで表示されるselectタグに対する操作
//選択肢を選ぶ(第２引数のオプションでlabel, value, indexが選べる、選びたい属性にあわせる)
await Page.SelectOptionAsync("#hogehoge", new SelectOptionValue { Label = "表示名" });
//選ばれている表示名を取得したい(第2引数のtextContentをvalueにすればvalueがとれる)
await Page.EvalOnSelectorAsync<string>("#hogehoge", "el =>el.options[el.options.selectedIndex].textContent");
画面遷移
画面遷移する
//現在のURLを取得する
Page.Url
//どこかのURLに遷移したい
await Page.GotoAsync("https://～～～～");
//何かをクリックして新しく開く別タブのウインドウを操作したい
var newPage =await BrowserContext.RunAndWaitForPageAsync(async () =>
{
await Page.ClickAsync("#hogehoge");
});
おわりに
普段使うものを挙げてみました。意外とたくさんある。
API仕様は大量に書いてあるので、自分のやりたいことがどれで実現できるのか探すのになかなか苦労するときもあります。
他にもAPIはたくさんあって、知れば効率よくテストコードもかけるんだろうなと思います。
今後もいろいろな使い方を勉強していきたいと思います。