Seleniumをtypescriptで使ってみる

画面開発でコーディングと動作確認を交互にしていると 毎回フル桁を入力して、ボタン押下して、結果確認して…の流れが結構辛い。

ということで、javascriptコードでブラウザ操作を自動実行してくれるseleniumを始めよう！（今更感）

seleniumインストール

何事もまずはnpm installから！！

npm install selenium-webdriver

次にseleniumが使うブラウザドライバーをダウンロードします

www.selenium.dev

ダウンロードしたドライバーはプロジェクトのルートディレクトリに配置しておきます

TypeScriptでブラウザ操作コードを書く

シンプルなログイン画面にID、パスワードを入力してログインボタンを押下してみます

まずはtsファイルを作成してお作法コードを書きます インストールしたseleniumを使うよ！宣言とchromeの設定です

const webdriver = require('selenium-webdriver');
const { Builder, By, until } = webdriver;
const assert = require('assert');

const capabilities = webdriver.Capabilities.chrome();
capabilities.set('chromeOptions', {
    args: [
        '--headless',
        '--no-sandbox',
        '--disable-gpu',
        `--window-size=1980,1200`
    ]
});

次にテキストボックスへの入力、ボタン押下、結果のassertを行います

/**
 * ログイン成功
 */
(async () => {
    const driver = await new Builder().withCapabilities(capabilities).build();
    await driver.get("http://localhost:3000");
    // IDパスワードを入力
    let userId = await driver.findElement(By.id('loginId'));
    userId.sendKeys("xxxxx");
    let password = await driver.findElement(By.id('password'));
    password.sendKeys("xxxxx");
    // ログイン
    let loginButton = await driver.findElement(By.id('loginButton'));
    loginButton.click();

    await driver.wait(until.elementLocated(By.id('paymentList')), 10000);
    // 支払い一覧ページへ遷移していること
    assert.strictEqual(await driver.getCurrentUrl(), "http://localhost:3000/payment");
    driver.quit();
})();

あらかじめ npm run serve で開発サーバにアプリをホスティングしておき

node loginTest.ts で上記コードを実行しましょう

自動でchromeが起動してログインを再現してくれます！！