How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with:

 <div class="class">
    <h4 class="class2"> 
      "Condition" </h4>
    <div class = "click_class">Click_text  </div>
 </div>

I need to click on the element with class ="click_class" only if the h4 has the text == "Condition".

I tried utilizing Xpath:

 .useXpath()
 .click('//div[contains(@class, "class")]//h4[text()[contains(.,"Condition")]]')

This successfully finds the h4 element with text as "Condition". Now, my goal is to locate the parent class and proceed to click on click_class.

.click('//div[contains(@class, "class")]//h4[text()[contains(.,"Condition")]]/parent::div[@class="class"]//div[text()="Click_text"]')

Unfortunately, this approach does not seem to work.

Is there a way to effectively click on an element based on a condition in the h4 text?

Answer №1

Check out this XPath:

//h4[normalize-space(text())="Condition"]/following-sibling::div[@class="click_class"]

Answer №2

If you'd like, you can create a predicate in the parent div to check for text content within h4:

//div[contains(@class, "class")][h4/text()[contains(.,"Condition")]]

Afterwards, you can access the child div element with the class "click_class" by navigating as follows:

/div[contains(@class, "click_class")]

This results in the complete expression which is organized for better readability:

//div[contains(@class, "class")][h4/text()[contains(.,"Condition")]]
/div[contains(@class, "click_class")]

demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to define and apply style attributes

I'm currently working on a script that will add a left and right border to a button in a row of 3 buttons when that specific button is clicked. The goal is for the borders to remain while the button is active, and disappear once another button is clic ...

Step-by-step guide on achieving 100% height for the <main> element in a Material UI drawer demo

I have a question regarding the Material UI drawer. In my project, I am trying to change the background color of the main tag. However, the main tag's height is restricted to the content inside. Check out this link for reference Setting the height t ...

Looking to target an element using a cssSelector. What is the best way to achieve this?

Below are the CSS Selector codes I am using: driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg-technik='append_numbers']")).click(); driver.findElement(By.cssSelector("button[class='btn-link'][data-sugg- ...

Stop the replication of HTML/CSS styles during the extraction of content from a div

Is there a way to prevent the copying of CSS properties, such as font styles and sizes, when content is copied from a div? I want only the plain text to be copied to the clipboard, without any formatting applied. ...

Css technique for changing color on mouse hover

I currently have a social media bar on my website with icons for Facebook, Twitter, Google+, and RSS. Here is how it looks: When I hover over the icons, I want the circle around the image to change color to blue. However, every attempt I've made end ...

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

Center Text Field to Linear Progress in React

I'm struggling to position a TextField/Autocomplete with a loader/linear progress at the bottom without it pushing the TextField/Autocomplete upwards. Can anyone suggest a proper solution for this issue? For reference, you can check out the Codesandb ...

What is the process for creating a personalized <a> tag using CSS?

On my website, I am looking to differentiate between two types of <a> tags - one for inline links and the other for standalone links. This means that I want these two variations of <a> tags to have distinct colors and styles. For inline links, ...

Enhancing navigation functionality using CSS

I have two separate pages with navigation included in both. This way, it's easier to edit the navigation menu once instead of doing so on each page individually. However, I am now facing uncertainty on how to implement the 'active' class usi ...

Is it possible to have dual images as the background for an HTML div?

Is it possible to use two images for a DIV background in CSS? I have one image that is just the background color and another that is a logo. Here's the code snippet I am currently using: .header{ background-attachment: scroll; background-clip ...

Tips for modifying the font style of a Bootstrap form input using a custom font

While developing my website using Bootstrap 4, I encountered an issue with the custom font (GeosansLight) I applied to the entire website through the body's CSS attribute. The problem arose when the default Bootstrap form inputs appeared too light to ...

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

I am faced with a dilemma that is leaving me uncertain. Within a flexbox layout, specifically column-oriented, there are three children: top, middle, and bottom. The challenge arises in the middle child where I must embed a third-party component that requ ...

HTML and CSS styled accordion with nested checkboxes: handling long items

I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type ite ...

Tips for expanding the maximum width of a container using bootstrap4

Having trouble increasing the maximum width of my container. How can I adjust the width in the source code? I've attempted changing the width size in the bootstrap-grid.css file. The Element Inspector lets me change the max-width. Any tips on modify ...

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

Constructing a horizontal slider using vertically floating divs

Struggling to create a basic horizontal image slider using overflow:hidden and floating divs. Despite efforts, the divs keep stacking vertically instead of horizontally. Numerous online examples have been attempted without success. HTML: <div id="slid ...

Adaptable bootstrap placement

I have created a form that includes a custom checkbox element. The issue is that the label for the checkbox is not vertically aligned with the checkbox itself. How can I adjust the label to be vertically centered with the checkbox? You can see the code ...

What causes jquery height and javascript height to both be returned as 0?

I'm facing an issue with a visible div on my screen - despite being visible, its height always returns as 0. I've attempted various jQuery and JavaScript methods to retrieve the height, but it consistently shows as 0. Here's the structure of ...

Switching Column Content with jQuery on Mobile Devices

In my design, I have a dynamic two-column layout created using Twitter Bootstrap 3. The layout switches between image-text and text-image alignment for each row. The goal is to adjust it for smaller screens (less than 768px) so that rows with images on th ...

Is there a way to align the height of a standard column with the ng-include section to ensure a cohesive page display?

I have been working on my Angular app and have implemented ng-include to dynamically add content to a template within the page. The issue I'm facing is that this specific area ends up being longer than both the html and body elements where it resides. ...