[Playwright]VScodeの拡張機能でらくらくブラウザ操作

はじめに

こんにちは。スペースマーケットでWebエンジニアしてます、新卒のdumbled0reです。
4月に入社してから早2ヶ月経って、入社式が昨日のように感じています。時の流れは早い。

日頃、ブラウザ操作する時はPythonのライブラリであるSeleniumを使用していましたが、vscodeにあるPlaywrightの拡張機能を使用すれば非エンジニアの方でも簡単にブラウザ操作用のコードを書けたので紹介します。

Playwrightとは

PlaywrightとはMicrosoftが開発したオープンソースのE2Eテスト自動化フレームワークです。
Chromium、Firefox、WebKitなどの主要なブラウザで対応しており、1つのコードで複数のブラウザ上で動作確認も行えます。
https://playwright.dev

環境

• node 20.9.0
• playwright 1.44.0

拡張機能のインストール

今回使用するVScodeの拡張機能はこちら↓
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

実行

今回はスペースマーケットの検索画面から特定のスペースを表示するまでのブラウザ操作用のコードを生成していきます。まず、tests/example.spec.tsを作成します。

tests/example.spec.ts

import { test, expect } from '@playwright/test';

test('検索結果が表示されること', async ({ page }) => {
　// カーソルはここにあります
});

VScodeのサイドバーから下記のアイコンをクリックします。

カーソルはコードを追加したい位置に合わせて、「Record at cursor」をクリックします。

あとは、GUI上でブラウザを操作したいように動かすだけです。
ブラウザ操作に合わせてコードが自動生成されているのが確認できます。
GUIで操作できるので簡単ですね。

操作をもとに、生成されたコードは以下のようになります。

tests/example.spec.ts

import { test, expect } from '@playwright/test';

test('検索結果が表示されること', async ({ page }) => {
  await page.goto('https://www.spacemarket.com/');
  await page.getByRole('button', { name: ' 検索する' }).click();
  const page1Promise = page.waitForEvent('popup');
  await page.getByRole('link', { name: 'chill inn 新大久保【新大久保駅5分】2023' }).click();
  const page1 = await page1Promise;
});

実際の動作を確認するには▷をクリックすると確認できます。

確認しやすくするために2秒だけスリープするコードを追加しました。

tests/example.spec.ts

import { test, expect } from '@playwright/test';

test('検索結果が表示されること', async ({ page }) => {
  await page.goto('https://www.spacemarket.com/');
  await page.waitForTimeout(2000); // 2秒待つ
  await page.getByRole('button', { name: ' 検索する' }).click();
  await page.waitForTimeout(2000);
  const page1Promise = page.waitForEvent('popup');
  await page.waitForTimeout(2000);
  await page.getByRole('heading', { name: '【新大久保】2023年OPEN 直前🈹/100' }).click();
  await page.waitForTimeout(2000);
  const page1 = await page1Promise;
});

操作の様子を確認できますね。

まとめ

今回は非エンジニアの方でも簡単にGUI操作だけで、ブラウザ操作用のコードを生成する方法を紹介しました。簡単にブラウザ操作したい時は試しに使ってみてください。

さいごに

スペースマーケットでは一緒にサービスを成長させていく仲間を探しています！
新卒でもフロントエンドやバックエンドに関わることでき、成長できる環境があります。
ご興味ある方はこちらからご応募お待ちしております！