ECMAScript 7のasync/await

システム部の稲葉です。

ECMAScript 7にasync/awaitが入るらしいとどっかに書いてあったので、勉強のためにサクッと使ってみる事にしました。

selenium-webdriverを使ってYahooとgoogleで検索した結果を自動でキャプチャしてみます。

 

(function() {
  'use strict';

  class Application
  {
    constructor()
    {
      console.log('App::constructor');
    }

    async run() // <- awaitを使用する関数/メソッドにasync修飾子をつける
    {
      console.log('App::run');

      var driver;
      var By;
      var Key;
      var until;

      var webdriver = require('selenium-webdriver');
      By = require('selenium-webdriver').By;
      Key = require('selenium-webdriver').Key;
      until = require('selenium-webdriver').until;

      driver = new webdriver.Builder()
        //.forBrowser('firefox')
        //.forBrowser('chrome')
        .withCapabilities({"browserName": "phantomjs", "phantomjs.cli.args": "--config=config.json"})
        .build();

      driver.get('http://www.yahoo.co.jp');
      driver.findElement(By.id('srchtxt')).sendKeys('デザインスタジオフェニックス');
      driver.findElement(By.id('srchtxt')).sendKeys(Key.ENTER);
      //driver.findElement(By.id('srchbtn')).click();
      driver.sleep(3000);
      //driver.wait(until.titleIs('「デザインスタジオフェニックス」の検索結果 - Yahoo!検索'),3000);
      await this.writeScreenshot(driver, 'yahoo.png'); // <- writeScreenshotの完了を待つ
      console.log('Yahoo!J done');

      driver.get('http://www.google.co.jp');
      driver.findElement(By.name('q')).sendKeys('デザインスタジオフェニックス');
      driver.findElement(By.name('q')).sendKeys(Key.ENTER);
      //driver.findElement(By.name('btnG')).then((elem)=>{
      //  //elem.sendKeys(Key.CONTROL);
      //  elem.click();
      //}, (err) => {
      //  //driver.findElement(By.name('btnK')).sendKeys(Key.CONTROL);
      //  driver.findElement(By.name('btnK')).click();
      //});
      driver.sleep(3000);
      //driver.wait(until.titleIs('デザインスタジオフェニックス - Google 検索'),3000);
      await this.writeScreenshot(driver, 'google.png'); // <- writeScreenshotの完了を待つ
      console.log('google done');

      driver.quit();
    }

    async writeScreenshot(driver, filename) // <- awaitを使用する関数/メソッドにasync修飾子をつける
    {
      console.log('App::writeScreenShot');

      await driver.takeScreenshot().then((data)=>{ // <- takeScreenshotの完了を待つ
        var fs = require('fs');
        fs.writeFileSync('./' + filename, data, 'base64');

        console.log('written fs');
      });
    }
  }

  let app = new Application();
  app.run();

}());

ブラウザ間でgoogleの検索ボタンが変わってしまうため、検索ボタンを押すのに悪戦苦闘した結果、検索ボックス内でエンターキーを押せばいいという結論に達しました。

あと、何気にchromeではgoogle検索のタイトルが変わった瞬間にキャプチャを取ると検索結果が真っ白になったため素直に時間で待つことにしています。

ちなみに動かすために、Node.js(io.js) + selenium-webdriver + traceur + chromedriver(or phantomjs)な環境を整えて、traceurのオプションに--experimentalを指定してECMAScript 5に変換するということをやっています。