質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 810

score 86

概要

複数のページを持つウェブページが存在し、ヘッダーにはナビゲーションがあります。
ナビゲーションには、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です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+3

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'
  }),
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 15:41

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

    キャンセル

+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();
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 13:15

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る