CODEWITHSUNDEEP
javascriptseleniumxpathnodes
kushal
kushal

Reputation: 31

How to click on a custom attribute in selenium?

I have this following html: which has a class and a custom attribute, I have several header's with the same className. I wanted to know how to uniquely get this element and click on it. 

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

This is what i tried:-

I tried to get the attribute of the class="font-white..." with data-collapse-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

I also tried:-

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

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

I wanted to know how to fetch this element in selenium and click on it.

this is the entire div:

<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>

Upvotes: 2

Views: 8709

Answers (3)

Zeeshan S.
Zeeshan S.

Reputation: 2091

Class is meant to define a group of elements having similar features. In this case, the topic-heading class is used to group the <h4> tags alongwith a unique ID attribute called as data-collapse-id. But in such case's we can't use ID to identify/specify each web element as the elements of same class can be hundreds/thousands.

You can try locating any header element uniquely using the following ways:

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 + "')]");

Ideally you should pass the exactHeadingText/partialHeadingText as a function parameter/argument so that the code can be reused to fetch any topic heading.

You can then use findElement() and perform any operation on it.

Upvotes: 0

Andersson
Andersson

Reputation: 52665

It seem that your element variable intends to return attribute. However, getAttribute() method should receive attribute name value as argument and return an attribute value which is a simple string... And here you got few problems:

  • you're trying to pass wrong argument: 'data-collapse-id="1"' instead of 'data-collapse-id'
  • attribute value, a string, is not clickable!

Simple answer to your question- there is no way you can click on a custom attribute

Upvotes: 0

Rabia Asif
Rabia Asif

Reputation: 298

Did you try:

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

Finding element through this attribute should work because this is unique. Also it sometimes unable to click on element found by xpath. I think this should work

Upvotes: 5

Related Questions