セレンのカスタム属性をクリックする方法は？

Question

私は次のhtmlを持っています： これはクラスとカスタム属性を持っていますが、私はいくつかのヘッダーに同じclassNameを持っています。この要素を一意に取得してクリックする方法を知りたかったのです。

<h4 class="font-white topic-heading progress-header no-margin width-80 d-table-cell" data-collapse-id="1">I. Introduction</h4> 

これは私が試したものです： -

私はクラス= "フォント白..." データ・崩壊-ID = "1" との属性を取得しようとしました：

var element = driver.findElement(By.xpath("//*[@class='font-white topic-heading progress-header no-margin width-80 d-table-cell']")).getAttribute('data-collapse-id="1"'); 
console.log(element); // this prints a promise. 

element.click(); //element.click is not a function exception 

私も試してみました： -

var element = driver.findElement(By.xpath("//*[@data-collapse-id='1']")); 

element.click(); // element.click is not a function exception. 

私はセレンでこの要素を取得し、それをクリックする方法を知りたいと思いました。

これは、全体のdivがある：

driver.findElement(By.cssSelector("h4[data-collapse-id='1']")).click(); 

これはユニークであるため、動作するはずです、この属性によって要素を検索：

<div class="page-width d-table topic-heading-div"> 
    <h4 class="font-white topic-heading progress-header no-margin width-80 d-table-cell" data-collapse-id="1">I. Introduction</h4> 
    <i class="fa fa-check font-white font-18 width-20 d-table-cell text-center vertical-center" aria-hidden="true"></i> 
</div> 

Answer 1

は、あなたがしようとしませんでした。また、xpathで見つかった要素をクリックできないこともあります。私はこれがうまくいくと思う

Answer 2

あなたのelement変数はattributeを返そうとしているようです。しかし、getAttribute()メソッドは、引数として、属性名の値を受け取り、単純な文字列である属性の値を返す...そしてここで、あなたはいくつかの問題だ必要があります。

• 間違った引数を渡すためにしようとしている：'data-collapse-id="1"'の代わり'data-collapse-id'を
• 属性値、文字列はクリックできません！あなたのquestion- へ

簡単な答えは、あなたが

Answer 3

クラスは、同様の機能を有する要素のグループを定義することを意味するカスタム属性をクリックすることができます方法はありません。この場合、クラスを使用して、<h4>タグと、data-collapse-idというユニークなID属性をグループ化します。しかし、このような場合、IDを使用して各Web要素を識別/指定することはできません。同じクラスの要素が数百/数千になる可能性があります。

あなたは一意に、次の方法を使用して任意のヘッダ要素を見つけてみてくださいすることができます

 
var exactHeadingText = "I. Introduction"; // Exact heading 
By locExactTopicHeading = By.xpath("//h4[contains(@class,'topic-heading') and text()='"+ exactHeadingText + "']"); 

var partialHeadingText = "Introduction"; // Partial heading 
By locPartialTopicHeading = By.xpath("//h4[contains(@class,'topic-heading') and contains(text(),'"+ partialHeadingText + "')]"); 

コードは、任意のトピックの見出しを取得するために再利用できるように、理想的には、関数のパラメータ/引数としてexactHeadingText/partialHeadingTextを渡す必要があります。

次に、findElement()を使用して、すべての操作を実行できます。