Zenn
📚

【Playwright】E2EツールのPlaywrightについて～関数編～

2024/06/30に公開
TypeScript
E2E テスト
Playwright
E2E
テスト自動化
tech

そして、関数編ということで、使用頻度が高そうな関数を挙げていきます！
（自分用メモなことは内緒）
使い方が独特なものとかは別途詳細な記事を書きたい（願望）

事前準備

↓の記事を参考にサンプルを作成するか、Githubからソースを取得してください。

関数

ページを表示

  • page.goto({URL})：
    引数のURLを表示する

要素取得

  • page.locator({selector etc…})：
    CSSセレクターとかで検索する
    （単純に文字列検索やID, CSSでも検索できる模様、Xpathも）

  • page.getByPlaceholder({Placeholder string})：
    Placeholderで検索する

  • page.getByRole("submit")：
    role属性で指定。するかと思いきやexampleを見ると、「h1」タグ＋値で要素を取得するみたいな使い方ができる模様
    例）page.getByRole('heading', { name: 'Installation' })

操作

  • page.getByRole().click()：
    .click()は取得した要素をクリックする

  • page.locator({selector etc…}).fill({input string})：
    .fillはテキストボックス（エリア）に値を入力する

検証（以下、アサーション）系

expect関数に含まれる関数をドットつなぎで使用します

  • expect({locator}).toBeChecked()：
    チェックボックスがチェックされているか確認する

  • expect({locator}).toBeVisible()：
    locatorに指定した要素が表示さているか確認する

  • expect({page}).toHaveTitle()：
    タイトルがあるか確認する

  • expect({val}).toBeDefined()：
    値がundefinedか確認する

  • expect({val}).toBe({val})：
    同じ値が入力されているか確認する（数値だけかも）

あとがき

今回はよく使いそうな関数を一覧化しましたが、今後アップデートかけていこうと思います。
特に、別記事にして調べたいのが、要素取得関連ですね。
PythonのSeleniumをちょっと触っていたことがあるのですが、それより汎用的・・・というか抽象的な印象です。
だもんで、使い方を忘れそうなので、詳しく調査したいところです。

関連記事

Github

記事に合わせたサンプルコード
https://github.com/beeeegle/playwrightSample

Discussion