javascriptのテストツールについて

Question

概要

複数のページを持つウェブページが存在し、ヘッダーにはナビゲーションがあります。
ナビゲーションには、result conversion summary adという項目があり、それぞれにリンクが貼られています。
そのリンクをクリックすることで該当ページに遷移するという一般的なものです。

ナビゲーションにあるリンク先のページは一つ一つ別ファイルのvueファイルで構成されており、それらに何らかの修正が必要になった場合は該当のファイルをそれぞれ修正する必要があります。

この時、修正したものが正しく動いているかテストを行うわけですが、テストの内容は以下の通りです。

例1） resultページを修正した場合（ファイル名：result.html）
1. トップページを開く
2. ナビメニューからresultを選択しクリックする
3. resultページに遷移する

例2） summaryページを修正した場合（ファイル名：summary.html）
1. トップページを開く
2. ナビメニューからsummaryを選択しクリックする
3. summaryページに遷移する

実現したいこと

現在下記のようなコードでテストを行っています。

'case1': function test(browser) {
  const devServer = ウェブページのURL; // http://hoge.jpなど
  browser
    .url(devServer)
    .waitForElementVisible('#app', 5000)
    .click('#result') // result.htmlを修正したのでresultページを開きたいため
    .waitForElementVisible('#pege-result', 5000)
    .end();
}

この.click('#result')の部分ですが、現在修正したページに合わせて手動で書き換えているのですが、動的に書き換えれるようにしたいのです。

発生している問題

上記コードでは、summaryページを修正したら、.click('#result')の'#result'の部分を#summaryに手動で書き換えてテストを実行する。ということを行っているのですが、これでは修正したページに併せて#resultの部分を都度手動で書き換える必要があります。

これを動的に書き換える手段がないものかと調査したのですが解決に至らず質問させてもらいました。

ただそもそもそんなことが可能なのか否かも調査中でまだはっきりとわかっておらず、実現可否含めてお教えいただけると幸いです。

補足情報

使用しているテストツールはnightwatch.jsです。

Answer 1

miyabi_takatsukさんの方針で基本的には良さそうですが、
まだ手動でやってない？UIテストを爆速で自動化できるNightwatch.jsが便利すぎを見る限り一工夫必要そうですね。

なので関数に引数を束縛するとっておきのテクニックを紹介します。

---

まず質問文のコードはだいたいこんな感じになっているだろうと推測されます。

module.exports = {
  'case1': function (browser) {
    const devServer = ウェブページのURL; // http://hoge.jpなど
    browser
      .url(devServer)
      .waitForElementVisible('#app', 5000)
      .click('#result') // result.htmlを修正したのでresultページを開きたいため
      .waitForElementVisible('#pege-result', 5000)
      .end();
  }
};

このcase1はbrowserを引数に取る関数であれば良いんですよね。
そうであれば下記のように書き換えても行けるはずです。

const test = function (browser) {
  const devServer = ウェブページのURL; // http://hoge.jpなど
  browser
    .url(devServer)
    .waitForElementVisible('#app', 5000)
    .click('#result') // result.htmlを修正したのでresultページを開きたいため
    .waitForElementVisible('#pege-result', 5000)
    .end();
} 

module.exports = {
  'case1': test
}

次は#resultの部分を関数の外から注入する方法について解説します。
JavaScriptには全ての関数にbindというメソッドが存在し、引数を覚えさせるが実行は待つという事が出来ます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

const add = function (a, b) {
  return a + b;
}
console.log(add(1, 2)); // 3

// 第一引数に予め5を設定したadd5を定義
const add5 = add.bind(null, 5);
console.log(add5(10)); // 15

// 3を設定したadd3も作ってみる
const add3 = add.bind(null, 3);
console.log(add3(7)); // 10

// add関数はこわれてないだろうね？
console.log(add(2, 3)); // 5 <- 問題なし

こうすることで「引数は設定するが実行するのは待つ」事が可能です。
この仕組みをコードに取り入れて見ましょうか。

const test = function (selector, browser) {
  const devServer = ウェブページのURL; // http://hoge.jpなど
  browser
    .url(devServer)
    .waitForElementVisible('#app', 5000)
    .click(selector) // result.htmlを修正したのでresultページを開きたいため
    .waitForElementVisible('#pege-result', 5000)
    .end();
}

module.exports = {
  'case1': test.bind(null, '#result'),
}

より実践的には色んなものを注入したいとなるので、
アロー関数やカリー化も駆使しつつ、オブジェクトを渡すようにするのがキレイだと思います。

const test = options => browser => {
  browser
    .url(options.url)
    .waitForElementVisible(options.app, (options.timeout || 5000))
    .click(selector)
    .waitForElementVisible(options.wait, (options.timeout || 5000))
    .end();
}

// ここまで抽象化すると最初のコードを変にラッピングしただけになるので加減が難しい
module.exports = {
  'case1': test({
    url: 'http://hoge.jp',
    app: '#app',
    selector: '#result',
    wait: '#pege-result'
  }),
}

Comments

[souta-haruran]

細かく、そして実践的な面を考慮していただいたコードをいただきありがとうございます。
勉強のためにも参考にさせていただきつつ、ちゃんと自分でも考えながら形にしていきたいと思います。

Answer 2

nightwatch.jsがどんなものなのか存じ上げないので、的外れかもしれませんが・・・、
testメソッドに、第二引数を入れれるのであれば、

'case1': function test(browser, pageId) {
  const devServer = ウェブページのURL; // http://hoge.jpなど
  browser
    .url(devServer)
    .waitForElementVisible('#app', 5000)
    .click('#' + pageId) // result.htmlを修正したのでresultページを開きたいため
    .waitForElementVisible('#pege-' + pageId, 5000)
    .end();
}

のようにすればいいのではないでしょうか？

Comments

[souta-haruran]

ありがとうございます。
確かに引数使えばいけそうです。
ご意見いただきありがとうございます、勉強させていただきます。