🤖

puppeteer フォームの自動入力と送信の基本

2024/12/13に公開

JavaScript

puppeteerを使って、自動でログインフォームの入力と送信を行ってみます。
今回はこちらの簡易的なログインフォームで試してみます。

Puppeteerのセットアップ

まず、Puppeteerをプロジェクトにインストールします。

npm install puppeteer

自動化スクリプトの作成

次に、自動化のためのスクリプトを作成します。
以下のコードは、特定のWebサイトにアクセスし、ユーザー名とパスワードを入力してログインボタンをクリックする簡単な例です。

import puppeteer from 'puppeteer';

async function formSubmit(
    url: string,
    usernameSelector: string,
    passwordSelector: string,
    username: string,
    password: string
    ) {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    await page.goto(url);

    await page.type(usernameSelector, username);
    await page.type(passwordSelector, password);

    await page.click('button[type="submit"]');
}

  formSubmit(
    'https://ima-portfolio-mooway.vercel.app/auth/login',
    '#email',
    '#password',
    'test@example.com',
    '1111'
  );

puppeteer.launch({ headless: false }): Puppeteerでブラウザインスタンスを起動します。headless: falseオプションは、ブラウザのGUIを表示して実行するためのものです。
browser.newPage(): 新しいブラウザページ（タブ）を開き、そのページを操作するためのPageオブジェクトを返すPromiseを返します
page.goto(url): 指定されたURLにブラウザページをナビゲートします。
page.type(selector, text): 指定されたセレクタにマッチする入力フィールドにテキストを入力します。
page.click(selector): 指定されたセレクタにマッチする要素をクリックします。

コードを実行すると、以下のように自動でフォームが入力され、ログインボタンをクリックします。

仮のユーザー情報を入れているのでログインには失敗してます😺

puppeteerを使うことで簡単に自動入力や送信ができるので、ぜひ試してみてください！

Puppeteerのセットアップ

自動化スクリプトの作成

Discussion