playwright-firefoxでggrksする #TypeScript

まえおき

Firefoxでしか動かない社内システムにpuppeteer-firefoxで対処していたのだけど、「Windowsでは動かない」って言われて、

うーん、じゃあしゃーない、playwright使ってみるか。ってなった。

~~ちなみに私はMacユーザなので、これを書いている時点では本当にWindowsで動くかどうかは知らない。~~
(playwright-firefoxだと無事に動いたそうです）

packages.json

  "dependencies": {
    "@types/node": "^13.7.0",
    "playwright-firefox": "^0.10.0",
    "typescript": "^3.7.5"
  }

こんなかんじかな。バージョン違いはあるとおもうけど。

とりあえず yarn add typescript @types/node playwright-firefox すればよい。

TypeScriptで書く

puppeteerはJavaScript実装だったのに対し、playwrightはTypeScriptだ。

ただ、GitHubのサンプルコードはなぜかJS。「PageとかBrowserとかどこから取ってこればええねん？」ってなる。

import { Page, Browser, firefox } from "playwright-core";

playwrightのソースを読んだ感じだと、たぶんこうすればいい。

tscが通らない...

$ /Users/yusuke-iwaki/src/hoge/node_modules/.bin/tsc index.ts
node_modules/playwright-core/lib/helper.d.ts:17:23 - error TS2688: Cannot find type definition file for 'debug'.

17 /// <reference types="debug" />
                         ~~~~~


Found 1 error.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@types/debug を入れれば直る。

yarn add --dev @types/debug

ブラウザを開くまでの定形コード

puppeteer-coreとMacにインストール済みのChromeを使って自動操作に書いてたコードをplaywrightで書き直すと

ggrks.ts

import { Page, Browser, firefox } from "playwright-core";

const launchChrome = firefox.launch({
    // ブラウザ画面を表示しながら（ヘッドレスモードを無効にする）。
    headless: false,

    // 人間味のある速度で入力/操作する。
    slowMo: 50,
});

launchChrome.then(async (browser: Browser) => {
    // 大抵のサンプルコードはここで単純に browser.newBrowserContext(), browserContext.newPage() しているだけのものが多いが、
    // ブラウザを開いたときにすでに１つタブが開いている場合には、２つ目のタブが開いてしまう。
    // それを防ぐため、すでにタブが開いている場合にはそれを使うようにする。
    let browserContext = await browser.defaultContext();
    let browserPages = await browserContext.pages();
    let page: Page = browserPages.length > 0 ? browserPages[0] : (await browserContext.newPage());


    // 自動操作するコードをここに書く
});

ggrksする

    // 自動操作するコードをここに書く
    await page.goto("https://google.com/");
    await page.type("input[name='q']", "puppeteer");
    await page.keyboard.press("Enter");

ここはpuppeteerのコードがそのまま使いわせる。すばらしや。

ただ、完全に同一ってわけでもない

たとえばpuppeteerだと、waitForの visible っていう名前のオプションが、playwrightだと visibility になっている！など、微妙な変更は必要。

TypeScriptで書いていれば、ビルドエラーになってくれるから気付ける。（JSだと気づけないかも...？）

playwright-firefoxでggrksする