[TestCafe][JavaScript]動的に要素を取得する

[TestCafe][JavaScript]動的に要素を取得する:

E2Eツールを使用したテストで大変なのは、画面を更新するとIDが変わったりする

ユニークなオブジェクトを取得しなきゃいけない時。

これは本当に大変です。

一部、自分なりに試行錯誤して、ある程度動的に要素を取得するものを作ってみたので、ここに残します。

試してみたのは相変わらず、動作の確認はTestCafeの練習ページになります。
https://devexpress.github.io/testcafe/example/

の、この部分です。



動的に要素を取得しなくてもいいところで参考程度に無理矢理やってるので、

実際には動作確認してません。

あくまで、こんなふぅに。ですすみません。

デバッグツール(F12キー)consoleタブ.

>  document.getElementsByClassName('slider-value').length 
<- "10" 

ちなみに内訳を確認するには.lengthを外せば確認できます。

デバッグツール(F12キー)consoleタブ.

>  document.getElementsByClassName('slider-value') 
<- HTMLCollection(10)[なんかゴニョゴニョ] 
0: div.slider-value 
1: div.slider-value 
2: div.slider-value 
3: div.slider-value 
4: div.slider-value 
5: div.slider-value 
6: div.slider-value 
7: div.slider-value 
8: div.slider-value 
9: div.slider-value 
length: 10 

これで対象の要素数が「10」であることが導きだされました。

この要素群の中で常に1番最後の要素を確認する処理を作ろうとする。

operation.js

// 要素数を格納->lastItem には 10 が格納される 
const allItem = ClientFunction(() => document.getElementsByClassName('slider-value').length); 
 
// lengthは0スタートなので、実際には-1する必要がある 
const lastItem = await allItem() - persaInt(-1); 
 
// 最後の要素の文字列を取得する 
const ItemElement = ClientFunction(() => document.getElementsByClassName('slider-value')[pos]); 
 
// 最後の要素の指定する 
const lastItemString = Selector('.slider-value').nth(' + await ItemElement(lastItem) + '); 
 
await t.expect(lastItemString.textContent).eql('10'); 

とすると、クラスに変更さえなければ、1～10の間に1.5や2.5などが入ってlengthが増えようが、

IDがユニークで表示する度にコロコロ変わろうが、常に最後の要素を取得できるかなと思います。

カレンダー的な画面で多用するようになりました。

操作した日付と、画面の日付が連動するような。

確認したい要素が1つのテーブルに纏まっていると、応用しやすいと思います。