Zenn
📚

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

2024/07/09に公開
E2E テスト
Playwright
E2E
自動テスト
テスト自動化
tech

ビックリするほどの高頻度で、Playwrightの記事を書いているわけですが・・・。
ここまで書いたら、本化して、まとめるのもありかも・・・って思い始めてます（笑

というわけで、今回はAPIテストについてを、つらつらと書いていきたいと思います。
Playwrightなんでもできますねぇ。

事前準備

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

概要

本記事では、かの有名なPokeAPIを使用して、PokemonのデータをGETだぜっ！していきたいと思います。
今回GETするのは、「フシギダネ」です。
「いけフシギダネ！（POST）」もしたいのですが、PokeAPIにPOSTのエンドポイントはないので、別途サンプル作らないと・・・。って考えてます。

サンプルと解説

最初にファイルの最終的な内容を記載して、のちに解説文を書いていきます。

サンプル

それではまず、「playwright.config.ts」の「baseURL」を書きます。

playwright.config.ts
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'https://pokeapi.co/api/v2/', // ★ここを書き換えます

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

次に、テストファイルです。
適当に「tc_pokemon_get_api.spec.ts」と名付けました。
内容は以下のようになっています。

tc_pokemon_get_api.spec.ts
import { test, expect } from '@playwright/test'

test('pokemon get daze', async ({ request }) => {
  // フシギダネをGETしよう
  const reponse = await request.get(`pokemon/1`)
  // レスポンスコードの検証
  expect(reponse.ok()).toBeTruthy()
  // レスポンスJSONアサーション
  expect(await reponse.json()).toEqual(expect.objectContaining({
      base_experience: expect.any(Number),
      species: expect.objectContaining({name: expect.stringContaining('bulbasaur')})
    })
  )
})

解説

E2Eテストと異なる部分を挙げていこうと思います。
全体的にはクリックなど操作がないので、非常にシンプルに見えます。
クセがあるとすれば、JSONのアサーション部分でしょうか。

E2E
test('has title', async ({ page }) => {
API
test('pokemon get daze', async ({ request // ① }) => {
  // フシギダネをGETしよう
  const reponse = await request.get(`pokemon/1`) // ②
  // レスポンスコードの検証
  expect(reponse.ok()).toBeTruthy()
  // レスポンスJSONアサーション
  expect(await reponse.json()).toEqual(expect.objectContaining({
      base_experience: expect.any(Number),
      species: expect.objectContaining({name: expect.stringContaining('bulbasaur')})
    })
  )
})

① pageから、requestになっています
② .getでMethodを指定して、引数にbaseURLに続くエンドポイントを記載してます
JSONアサーションは・・・記載しようと思ったのですが、PokeAPIの戻り値がすごい量なので、いったんここまでにして、アップデートをします。
まずは、フェーズ０ってことで。。。

あとがき

今回はGETの触りだけですが、今後は以下を追加していこうと考えています。
むしろ、APIの基本が不足してる感じが・・・（笑

  • pathパラメータを使用する
  • クエリパラメータを使用する
  • リクエストボディを使用する
  • get以外のmethodを使用する

あとは、JSONのアサーションを書いていて思ったのですが、そっちも記事にまとめたいと思い始めて、これは大変だ。

関連記事

参考など

https://pokeapi.co/

Discussion