How can I find a group of child div elements with specific class attributes using Selenium locators?

I am in search of a list of child div class tags. Inspecting elements in Chrome hasn't yielded the desired results with the Xpath I've been using.
There are 5 tabs displayed on the page and I need to gather all of them into a list for iteration using a For Each loop.

I need to find and collect all these tabs

<div class="jsx-1429490698 Tab Tab_active Tab_sports">sports</div>
<div class="jsx-1429490698 Tab  Tab_casino">casino</div>
<div class="jsx-1429490698 Tab  Tab_liveCasino">live &amp; real</div>
<div class="jsx-1429490698 Tab  Tab_esports">esports</div>
<div class="jsx-1429490698 Tab  Tab_vegas">vegas</div>

The Xpath I'm using is

//div[@id='__next']//following-sibling::div[contains(@class, 'Tab')]

The locator declaration is as follows:

[FindsBy(How.Xpath, Using="//div[@id='__next']//following-sibling::div[contains(@class, 'Tab')]")]
private IList<IWebElement> PromotionBrandTabsListElement {get; set;}

When trying this Xpath locator in Chrome, it initially highlights

<div class="jsx-1350237217 Tabs__container">

and then it highlights

<div class="jsx-1429490698 Tab  Tab_casino">casino</div>

I want it to highlight Sports, Casino, LiveCasino, Esports, and Vegas. I wish to have all these tab elements in a list.

The HTML structure looks like this:

<div id="__next">
<div class="jsx-2794910414 top">
    <div class="jsx-133833352 Promotions__container">
        <div class="jsx-1850983400 Title__container">
            <div class="jsx-1850983400 Title__text--container">
                <div class="jsx-1850983400 Title__text">Promotions</div>
            </div>
        </div>
        <div class="jsx-1350237217 Tabs__container">
            <div class="jsx-1429490698 Tab Tab_active Tab_sports">sports</div>
            <div class="jsx-1429490698 Tab  Tab_casino">casino</div>
            <div class="jsx-1429490698 Tab  Tab_liveCasino">live &amp; real</div>
            <div class="jsx-1429490698 Tab  Tab_esports">esports</div>
            <div class="jsx-1429490698 Tab  Tab_vegas">vegas</div>
        </div>
        <div class="jsx-3650671054 jsx-3221847745 Promotion">
    </div>
</div>

How can I specifically retrieve Sports, Casino, LiveCasino, Esports, and Vegas tabs?

Thank you

c#cssseleniumselenium-webdriverxpath

Answer №1

Consider updating your xpath query to:

//div[@id='__next']//div[contains(@class, 'Tabs__container')]//div[contains(@class, 'Tab')]

Test it out and verify if it produces the desired outcome.

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

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Tips for identifying when the end of a page is reached in an Android app using Appium with a dynamic approach

While automating in appium, when reaching the end of a page, I want to stop my check conditions. To determine if we have reached the end of the page, I have experimented with various methods such as: Checking for an "end" element (if it is displayed, it ...

seleniumscrollappiumlogcat

How do I trigger a click event on an autocomplete search bar in Vue with a router link enabled?

I'm working on an app that is similar to Github, and I want to create a search bar functionality just like Github's. However, I'm facing an issue with my search bar located in the navbar option section as it doesn't seem to register any ...

javascripthtmlcssvue.jsbootstrap-4

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

javascripthtmlcssreactjsmaterial-ui

Creating a User Interface for a Selenium script using Python: A Step-by-Step Guide

I recently developed a Python Selenium script for sending WhatsApp messages. I am now looking for a way to execute that script through a webpage. Can anyone provide guidance on how to achieve this? ...

pythonhtmlselenium-webdriver

Tips for minimizing excess white space in Shiny applications

Encountering an issue with plot output in Shiny. When using standard ggplots, the output is correct without any extra white margins. However, when utilizing the "ggmap" package (which also produces ggplot-type outputs), white margins suddenly appear. (Ple ...

cssrshiny

Can you explain the difference between dots-per-CSS-inch and dots-per-physical-inch?

When accessing jsfiddle.net, I received the following message in the Chrome Developer Tools console tab: The message suggests using 'dppx' units instead of 'dpi' in CSS, as 'dpi' does not correspond to the actual screen den ...

javascripthtmlcssjsfiddle

Using jQuery or JavaScript to adjust the bottom margin

Looking to Add Bottom Margin for Selection Box I have attempted the following CSS: #Selection { margin-bottom:23px; } Unfortunately, this method did not work for me. Is there a way to achieve this using JavaScript or jQuery? View Example on JsFiddle S ...

javascriptjqueryhtmlcssmargin

Error: Module 'selenium-selenium' could not be located

The software versions currently in use are: nvm --version 0.35.3 npm -v: 6.14.8 node -v: v14.10.0 Highlighted excerpts from the package.json file: { "main": "index.js", "scripts": { "start": "./node_mod ...

node.jsselenium-webdrivernpmselenium-chromedriver

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

phphtmlcss

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

javascriptjquerycssmatch

Creating a responsive div section following the navigation bar using Bootstrap

Seeking advice on how to position a div region containing page content beneath a navbar without using margin-top. Currently, I have implemented margin-top:200px, but I am uncertain if this approach is responsive or if there is a better method available. T ...

htmlcsstwitter-bootstrap

Verify if the Android device has been placed on silent mode

I recently developed a plugin for Android apps that is intended to determine whether the phone is muted or not. However, I encountered a strange issue where the result of calling my function always returns "false". Below is the code snippet for my plugin: ...

javac#unity-game-engine

Div or box container with a CSS arrow sliced through

Is there a way to transition from a basic square menu to something more complex like this -> view image example Below is the CSS I've been using: .menu { width:50px; height:50px; display:block; background-color:red; overflow:hidden -ms-transform: ...

htmlcss

Tips for recognizing when a private message queue (MSMQ) in C# has surpassed its message storage capacity?

Is there a method in C# to check if a private MSMQ has gone over its storage capacity in kilobytes? For instance, I have created a private MSMQ with a 100 KB storage limit using the Computer Management console. https://i.sstatic.net/fpzIB.png I have bee ...

c#asp.net.netmsmq

Parsing JSON multiple times to extract data on the top 10 games from Twitch's API

Hey there! I have a little coding challenge for you. The current code below is only fetching the first channel from the JSON. My goal is to fetch all the streams and display them in a grid format with three streams per row. Can you help me achieve this? (B ...

javascriptjqueryhtmlcss

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code: @keyframes fade-in{ 0%{ opacity: 0%; } 100%{ opacity: 100%; } } @keyframes fade-out{ 0%{ opacity: 100%; } 100%{ opacity: 0%; } } Impleme ...

javascripthtmlcss

Automated Testing with Selenium: Google Search Test Scenario

package com.test.webdriver; import static org.junit.Assert.fail; import java.util.concurrent.TimeUnit; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import or ...

seleniumjunitselenium-webdriverjunit4

What causes the size of text to change when I zoom in my browser?

As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...

htmlcsscss-position