ワイアまたはセレンを使用した自動化されたUIコンポーネント

マテリアルUIコンポーネントの自動UIテストの方法を知っている人がいるかどうかを調べようとしています。ワイアまたはセレンを使用した自動化されたUIコンポーネント

素材UI要素は、例えば、非常に小さな固有のID情報とネストされたdiv要素としてレンダリングされている：

<div data-reactroot style="..."> 
    <div style="..."> 
    <div style="..."> 

    </div> 
    </div> 
</div>

ネストされたDIV構造は不可能ではないとしても困難な伝統的な場所の方法を用いて作る - （セレンとワチール）を、IDを、名前、クラスなど

反応devtoolsを使用すると、ページがどのように構造化されているかがはっきりと分かりますが、React "DOM"にアクセスして要素を見つけることができません。

ご意見やご協力をいただければ幸いです。

追加の例は：

Sliders

私は、文字通り任意のテキストなしでネストされたdiv要素の10層とすることができ、上記の1以上の記述である例を思い付くことができません。

出典

2016-08-15 smact3010

私が見た例から、コントロールにIDを追加できるように見えます。たとえば、[テキストフィールドの例]（http://www.material-ui.com/#/components/text-field）には、デフォルト値フィールドにIDがあります。それはオプションですか？少なくとも、ユーザーが望む要素（例えば、テキスト、ラベルとの関係など）を特定できる必要があります。あなたが作業しているページの詳細を表示することで、回答を提供するのに役立つかもしれません。 –

私たちはコンポーネントにIDを追加することを検討していますが、機能コントロール（コンポーネントの内部）は、スライダコンポーネントの「ハンドル」はIDより複雑です。テキストのIDまでは、ネストされたdiv構造体内のテキストを見つけると、一番外側のdivが返されます。これは最終的にはアプリケーションのルートになる可能性があります。 – smact3010

残念ながら私が知っている一般的な方法はありません。

部品の一部、すでにあなたは（正確なフィールドを得るために、通常は十分です）#my-component inputのようなCSSセレクタを使用することを可能にする、id秒を持って、他の人を追加するカスタムクラス名を持っている（のようなAutoCompleteからpopoverProps）がいます同様のセレクタを使用することができます。

グッドニュースは、すべてのMaterialUIコンポーネントは、（少なくとも部分的に）要素を見つけるために使用することができ、classNameを提供することである - 詳細はhttp://www.material-ui.com/#/customization/styles で発見することができます。またidフィールドが文書化されていない場合でも、かなり頻繁に動作します。

最後の手段（クラス+他のcssセレクタパーツによる検出が不十分な場合）では、要素テキストを使用してXPath式に戻すことができます。たとえば、一致するメニュー項目に//span[@class="menu-item"][.//div[contains(text(),"${itemName}")]]を使用します。 <MenuItem primaryText={itemName} className="menu-item">と一致します

出典

2017-01-05 10:45:58

ワイアまたはセレンを使用した自動化されたUIコンポーネント

答えて

関連する問題