프런트 엔드 테스트 도구 비교 Puppeteer #02 테스트

테스트 코드

const puppeteer = require('puppeteer');

const loginUrl = 'http://***/' // テストするURL
const pageTitle = 'React Test';
const id = 'takeda';
const pw = 'shinji';
const inputList = ['javascript', 'ruby', 'scala'];

// ログイン画面の操作
async function phase1(page) {
  console.log('start phase1');

  // ログインページに遷移する
  await page.goto(loginUrl);

  // @TODO titleのアサーション →puppeteerではアサーションは未実装
  await page.screenshot({ path: 'image/01_home_first.png' });

  // input#idにフォーカスを当てる
  await page.click('#id_input');
  await page.screenshot({ path: 'image/02_home_focused.png' });

  // ログインエラーでモーダルを出し、閉じる
  await page.click('#login_button');
  await page.waitForSelector('#error_label');
  await page.screenshot({ path: 'image/03_login_failed.png' });
  await page.click('#close_button');

  // id,passwordを入力する
  await page.type('#id_input', id);
  await page.type('#pass_input', pw);
  await page.screenshot({ path: 'image/04_home_input.png' });

  // loginボタンを押下してページ遷移
  await page.click('#login_button');

  // 特定のDOMレンダリングを待つ
  await page.waitForSelector('#text_input');
  console.log('ログインに成功しました');
}

// リスト画面の操作
async function phase2(page) {
  console.log('start phese2');

  // ログイン完了後スクリーンショット
  await page.screenshot({ path: 'image/11_list_first.png' });

  // リストを登録
  for (let value of inputList) {
    await page.type('#text_input', value);
    await page.click('#regist_button');
  }
  await page.waitFor(500);
  // リストを追加後スクリーンショットを撮る
  await page.screenshot({ path: 'image/12_list_addlist.png' });

  // @TODO リストの一番上を一番したに移動させる
}

// 別タブの操作
async function phase3(page, browser) {
  console.log('start phase3');

  // 別タブリンクをクリック
  await page.click('#blank_link');
  await page.waitFor(1000);

  // 新しいタブを操作
  const pages = await browser.pages();
  const page2 = pages[2];
  await page2.bringToFront();
  await page2.waitFor(500);

  // 新しく開いたページをスクリーンショット
  await page2.screenshot({ path: 'image/21_tab_first.png' });

  // 新しく開いたタブを閉じて、スクリーンショット
  await page2.close();
  await page.screenshot({ path: 'image/22_tab_return.png' });
}

// ブラウザバックの操作
async function phase4(page) {
  console.log('start phase4');

  // リストのリンクをクリック
  await page.click('#list_label3 h3 a');
  await page.waitFor(500);
  await page.screenshot({ path: 'image/31_list_link.png' });

  // @TODO リスト画面に戻る
  // @TODO 再度リンク先へ進む
}

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });

  // 新規ページを開く
  const page = await browser.newPage();
  // 画面サイズの指定
  page.setViewport({ width: 500, height: 500 });

  await phase1(page);
  await phase2(page);
  await phase3(page, browser);
  await phase4(page);

  // ページを閉じる
  browser.close();
  console.log('end puppeter');
})();

결과