Selenium WebDriverでテスト書くのにAsync/Awaitを使ってみた

E2Eテストを書くときにSelenium WebDriverを使っているんだけど、テストをJavaScriptで書くと、下みたいな感じでPromiseのチェーンだらけになるのがあまり好みじゃなかった。

const assert = require('power-assert');
const chrome = require('selenium-webdriver/chrome');
const {Builder, By, Key} = require('selenium-webdriver');

describe('Promiseベースで書いたテスト', function () {

  this.timeout(20000);

  let driver;

  beforeEach(() => {
    driver = new Builder()
      .forBrowser('chrome')
      .setChromeOptions(new chrome.Options().headless())
      .build();
  });

  afterEach(() => {
    driver.quit();
  });

  it('then,then,then', () => {
    return driver.get('https://www.google.com').then(() => {
      driver.findElement(By.name('q')).sendKeys('webdriver');
      return driver.sleep(1000);
    }).then(() => {
      driver.findElement(By.name('q')).sendKeys(Key.TAB);
      driver.findElement(By.name('btnK')).click();
      return driver.sleep(1000);
    }).then(() =>  {
      return driver.getTitle();
    }).then((title) => {
      assert(title === 'webdriver - Google 検索');
    });
  });

});

なので、普段はPythonとか別の言語で書いていた。 ECMAScript2017でAsync/Await入るの見た時に、雰囲気変わるかなーと思いつつ試さずに放置してたので、最近はじめた気分転換のついでに試してみた。

こんな感じになった。

const assert = require('power-assert');
const chrome = require('selenium-webdriver/chrome');
const {Builder, By, Key} = require('selenium-webdriver');

describe('Async/Awaitで書いたテスト', function () {

  this.timeout(20000);

  let driver;

  beforeEach(() => {
    driver = new Builder()
      .forBrowser('chrome')
      .setChromeOptions(new chrome.Options().headless())
      .build();
  });

  afterEach(() => {
    driver.quit();
  });

  it('await,await,await', async () => {
    await driver.get('https://www.google.com');
    driver.findElement(By.name('q')).sendKeys('webdriver');
    await driver.sleep(1000);

    driver.findElement(By.name('q')).sendKeys(Key.TAB);
    driver.findElement(By.name('btnK')).click();
    await driver.sleep(1000);

    const title = await driver.getTitle();
    assert(title === 'webdriver - Google 検索');
  });

});

多少マシになった感じ?

ちなみにPythonで書くとこんな感じ。

import unittest
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import os
import time

class GoogleSearch(unittest.TestCase):

    def setUp(self):
        driver_path = os.path.join(os.path.dirname(__file__), 'chromedriver')
        options = webdriver.chrome.options.Options()
        options.add_argument('--headless')
        self.driver = webdriver.Chrome(executable_path=driver_path, chrome_options=options)

    def test_search_in_google_com(self):
        driver = self.driver

        driver.get('https://www.google.com')
        q = driver.find_element_by_name('q')
        q.send_keys('webdriver')
        time.sleep(1)

        q.send_keys(Keys.TAB)
        driver.find_element_by_name('btnK').click()
        time.sleep(1)

        assert driver.title == 'webdriver - Google 検索'

    def tearDown(self):
        self.driver.close()

if __name__ == '__main__':
    unittest.main()

もっと込み入った感じのを書いてみないとなんとも言えないけど、ありかなー？どうかなー？って感じ。

お試し用のリポジトリはこちら