2

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>
Improve this question
8
  • "h4" is a header tag and not clickable (to my knowledge). What HTML code follows that line? Commented May 17, 2017 at 20:52
  • I have added the entire div in my answer thanks. Commented May 17, 2017 at 21:07
  • Add /I to the end of your xpath. I believe that will work Commented May 17, 2017 at 21:19
  • That should be lower case (auto-correct) Commented May 17, 2017 at 21:22
  • to the first one or the second one: something like this : var element = driver.findElement(By.xpath("//*[@data-collapse-id='1']/I")); Commented May 17, 2017 at 21:22

3 Answers 3

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.