自動テストフレームワークとブラウザ自動操作ツールの違いについて

概要

E2Eのテスト自動化を行うにあたりツールの選定をしていたところ
「ブラウザ自動操作ツール（PuppeteerやPlaywrightなど）と自動テストフレームワーク（CodeceptJSやGaugeなど）の違いって何だ？」
となったので、自分なりにまとめてみる。

ブラウザ自動操作ツール

文字通りブラウザを自動で動かすツール。
有名どころのツールであれば、

  • Puppeteer
    Chrome やFirefox をヘッドレス（CUIでブラウザを動かすこと）で操作することができるNode.js のライブラリ

  • Playwright
    Puppeteer の開発チームがMicrosoftで開発したNode.js のライブラリ

  • Selenium
    Edge などの複数のブラウザにも対応している大規模なツール

などがある。
それぞれのツールでPython や Javascript などの言語で書くことができる。

自動テストフレームワーク

上記のブラウザ自動操作ツールと組み合わせてBDD（振る舞い駆動開発）やATDD（受け入れテスト駆動開発）のテストを自動で行うためのフレームワーク。
具体的なツールとしては

  • CodeceptJS
    テストの流れをプログラムのように書くことができるNode.js のライブラリ

書き方の一例

Feature('ToDo');

Scenario('create todo item', ({ I }) => {
  I.amOnPage('http://todomvc.com/examples/react/');
  I.dontSeeElement('.todo-count');
  I.fillField('What needs to be done?', 'Write a guide');
  I.pressKey('Enter');
  I.see('Write a guide', '.todo-list');
  I.see('1 item left', '.todo-count');
});

書き方の一例
自然言語で書く部分

# Search the internet

## Search Google
* Goto Google's home page
* Search for "Cup Cakes"

プログラムの部分

# 上記の「Search for "Cup Cakes"」で呼び出される
step("Search for <query>", (query) => {
  write(query);
  press("Enter");
});

また、自然言語は日本語にも対応している

zenn.dev

などがある。