SeleniumとGruntを使って、初心者がつまづいたポイントまとめ #Selenium

ここ最近フロントエンド開発に携わっており、テスト自動化を導入してテストコードをひたすら書き進めているのですが、プロジェクトにテスト駆動開発に携わったことのある先人がおらず、いざテストコード書くぞ！という時に苦戦したので、まとめたいと思います。

Selenium WebDriverとは

ローカルPC上で中継サーバー(Selenium Server)を起動して、ブラウザに現れた要素を操作（取得、書き換え、クリック等）し、想定通りかを判定することができる。

Gruntとは

作業を自動化して開発やテストを効率化してくれる。
Gruntfile.jsで作業内容を制御し、gruntコマンドで実行できる。

インストール

npm install selenium-webdriver
npm install grunt-cli

環境

・Windows10
・JavaScript
・Mocha(テストフレームワーク）
・grunt(タスクランナー）
・mocha-jenkins-reporter(mochaからJenkins用のテスト結果レポートを出力する)

Gruntfile

Gruntfile.js

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-env'); //gruntでタスク指定
  grunt.loadNpmTasks('grunt-mocha-test'); 
  grunt.loadNpmTasks('mocha-jenkins-reporter');
  // 設定内容を記述
  grunt.initConfig({
    selenium: {
      test: {
        JUNIT_REPORT_PATH:'reports/result.xml';
      }
     },
    mochaTest: {
      test: {
       src:['test/*.js'],
       options:{
         reporter: 'mocha-jenkins-reporter',
         noFail: false
       },
      },
    },
  });

  grunt.registerTask('test', ['selenium:test', 'mochaTest']);
};

Grantfileの引数

テスト実行時に自由に引数を渡すことができる。
テスト結果のファイル名をテストコード数に合わせて動的に変えたりしたかったけど…テスト実行ファイルが複数ある場合、一つのファイルとして見なされて実行されるため変えられなかった。
（何か良い方法あれば教えてください…！）

クリックや値取得の範囲でのつまづき

1. あるはずの要素が取得できない

基本的に「display: none;」「visibility: hidden;」に設定している要素の値を取得したり、クリックしたりしても見つからない。隠された（非表示）要素になっていないものを操作するようにする。

2. クリックできない

下記のいずれかの書き方で動作する。

test.js

await driver.findElement(By.id(displayButton)).click(); 
// 上記でクリックできない時
await driver.findElement(By.id(displayButton)).sendKeys('\n');

3. 描画されているはずなのに値等が取得できない

SeleniumテストはSeleniumServerで動作する。ローカル画面がテスト対象となるが、ローカル画面はSeleniumServer上でテストされる。そのため自身のローカル環境で画面が表示されていることが確認できてもSeleniumServer上で表示できていない可能性がある。
ネットワーク再接続なども試してみる価値あり。

4. スクロールがうまく動作しない

高さを指定する。

test.js

await driver.executeScript('window.scrollTo(0,500)');

後記

つまづいた点を思い出したら追記予定