3

ちょっとした背景: チームはC# を使用して QUnit UI テストとブラウザー自動化テストを作成しています。両者で共有できる JSON オブジェクトを作成したいと思います。そうすれば、クラス名が変更された場合、構成ファイルを 1 か所で更新するだけで済みます。

サイトはテンプレートを使用して非常に動的であるため、これらのテスト オブジェクト構成ファイルは実行時に作成する必要があり、静的な html を解析することはできません。

データ構造を手動で生成するか、ID/クラスをキャプチャして生成されたデータ構造を変更するのに役立つツールを作成することができます。私のチームがテストしているサイトには何百ものコントロールがあるため、手作業でコーディングしたくありません。

テストでは、これらのテスト オブジェクトを活用して、サイトが多くのチャーンを受けており、現在のテストが毎日中断されているため、メンテナンスを容易にします。すべてのテストが同じテスト オブジェクトを参照すると、そのオブジェクトの構成を修正するだけで済みます。

現在、セレクターを受け取り、その要素とその子のすべてのプロパティを生成する JavaScript 関数を作成することを考えています。後で使用するために、スクレイピングしたいコントロールを渡す関数を実行時に呼び出し、出力を切り取り、貼り付けることができます。これらのオブジェクトを生成するより良い方法はありますか?

図：

子 A、B、C を持つナビゲーション バー。いずれかを選択できます。

<div id="nav-bar">
    <div class="a selected">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

次のコード (jQuery スタイル セレクター) を作成したいと思います。

var nav_bar = {
    selector: "#nav-bar",
    children: {
        a: { selector: ".a" },
        b: { selector: ".b" },
        c: { selector: ".c" },
    }
}

次に、selectedItem のようないくつかの特別なプロパティを手動で追加できます。

var nav_bar = {
    selector: "#nav-bar",
    children: {
        a: { selector: ".a" },
        b: { selector: ".b" },
        c: { selector: ".c" },
        selectedItem: { selector: ".selected" }
    }
}

これで、nav_bar オブジェクトを解析して、便利なテスト オブジェクトを作成できました。

var nav = createTestObject(nav_bar);
// var nav = {a: $(".a", "#nav-bar"), b: $(".b", "#nav-bar"), selectedItem: function() { return $(".selected", "#nav-bar"); }}
// Can automate a simple test at this point...could use some more helper functions
// Click b if not already selected
if(nav.b[0] != nav.selectedItem()[0])
{
   nav.b.click(); // assumes clicking causes selected class to change
}

クラス ".selected" が変更された場合、テスト コード全体を検索して置換する必要はありません。selectedItem.selector の 1 つの構成ファイルを更新するだけです。

前もって感謝します、ジョー

4

1 に答える 1

0

テスト オブジェクトを生成して何を達成しようとしているのかわかりません。選択したら、それが選択されたクラスnav.b.click()であることをテストしますか?b

PhantomJSの使用またはZombie.jsでのテストを検討する必要があります。

于 2012-05-22T05:53:32.490 に答える