What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below:

<ul>
  <li>
    <a href="#" role="button" class="js-pagination link" data-page="1">1</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link active" data-page="2">2</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="3">3</a>
  </li>
  <li>
    <a href="#" role="button" class="js-pagination link " data-page="4">4</a>
  </li>
</ul>

I am tasked with selecting the next immediate element (not adjacent) after the element that contains 

class="js-pagination link active"
. In this case, it is the third li element. I have attempted to use the following CSS selector:

"ul li a[class='js-pagination link active'] + li"

However, this is not working as it is searching for the li on the same level as the a tag. How can I achieve this using a CSS selector?

I am unable to use .has() as I am utilizing this selector in Selenium CSS select to locate elements.

javascriptjqueryhtmlcssselenium

Answer №1

In order to choose a li element with the class a.js-pagination.link.active, you can utilize the :has() function and then proceed to select the subsequent li element using .next().

$('li:has(a.js-pagination.link.active)').next('li')


$('li:has(a.js-pagination.link.active)').next('li').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

It's important to note that there is no :has() selector available in CSS, so this task can only be accomplished through JavaScript.

Answer №2

In jQuery, you can select the class .active, traverse to its parent() element, and then find its next() siblings.

$('.active').parent().next().css('background', 'green');


  $('.active').parent().next().css('background', 'green');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" role="button" class="js-pagination link" data-page="1">1</a></li>
  <li><a href="#" role="button" class="js-pagination link active" data-page="2">2</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="3">3</a></li>
  <li><a href="#" role="button" class="js-pagination link " data-page="4">4</a></li>
</ul>

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

Angular Search Version 2.0

I am facing an issue with my search functionality in Angular 2. When I type into the search box, the search method on the service is not triggered. I believe there might be a simple solution that I am missing. Any assistance would be greatly appreciated. ...

javascriptangular

Employ the power of a static force layout to forge an intricate web of connections within the realm of

I have found a great network that works really well. It automatically updates the node position when the size of the window changes. Now, I want to make it fixed. What I mean by this is that I want to compute a certain number of ticks (let's call it ...

javascriptd3.jssvelte

Encountering an Issue: The program is throwing a TypeError because it is unable to access properties of null when trying to read '

My goal is to upload an excel file using ng-click and the fileUpload($event) function defined in the app controller scope. I am utilizing xlsx to read the file in JSON format, but I encounter an error when running the code: <div> <input id ...

javascriptnode.jsangularjsmongodbmodel-view-controller

Having trouble with Angular redirecting to the home page?

Having a bit of trouble: core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unable to match routes. URL Segment: 'home' This is the code snippet from view.html: <div class="container"> This serves as the main app; <a rou ...

javascriptangularjsimportangular-routing

What is the best way to manage div visibility and sorting based on selections made in a select box?

Explaining this might get a bit confusing, but I'll do my best. In my setup, I have two select boxes and multiple divs with two classes each. Here is what I am trying to achieve: When an option is selected, only the divs with that class should be ...

javascriptjqueryselecthideshow

What is the best way to extract the JSON data from a client-side GET request response?

Here is my request from the client side to the server in order to retrieve JSON data. fetch("/" + "?foo=bar", { method: "GET", }).then(response => { console.log(" ...

javascriptnode.jsjsonajaxexpress

Establishing a jQuery extension

Reviewing some code on our website led me to this particular snippet: <script> (function (a) { _q = function () { return a; }; $ = function (f) { typeof f === 'function' && a.push(arguments); return $; }; ...

jqueryasp.net-mvc

"Encountering difficulty in retrieving a parameterized value from the testNG xml file

Here is the content of the testNG.xml File: https://i.stack.imgur.com/Ojg4e.png The contents of the day4.java File are as follows: ] Displayed below is the console Result. Can anyone help me with resolving this issue? I attempted using the @optional ...

seleniumautomationtestngparameterization

Steps for Embedding an HTML Page into a Tab using jQuery

Within the tab labeled class=plots-tabs-heatmap, I am attempting to insert a new page using the code below. However, instead of seeing tmpdata/page2.html displayed on the tab, nothing appears. $('#plots-tabs-heatmap').html("tmpdata/page2.html"); ...

jqueryhtmltabs

Tips for automatically closing one sub menu while selecting another sub menu

I am working on a code snippet to manage the menu functionality. My goal is to ensure that when I click to open one submenu, any other currently open submenus should automatically close. ;(function($) { // Ensuring everything is loaded properly $ ...

javascriptjquery

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

Serenity BDD does not have the capability to capture screenshots using appium

Having an issue with Serenity BDD and the Screenplay Pattern in combination with Appium 1.3.1. The problem is that the project is not generating screenshots for each step, resulting in the report not displaying the captures of the steps. Despite no errors ...

seleniumselenium-webdriverappiumbrowser-automationserenity-bdd

Tips on choosing an element in Selenium with a dynamically generated ID that consistently ends with a specific string

For example, here are the unique IDs generated for that specific element: x123abz456 y987xyz123 a1b2c3d4e5 ...

python-3.xselenium

Implementing file uploads with Bootstrap, jQuery, and Laravel

Looking to incorporate the blueimp jquery file upload feature into my Laravel app. Check it out here: https://github.com/blueimp/jQuery-File-Upload The form is set up and working properly with the plugin, but facing issues with creating server-side script ...

javascriptphplaraveljquery-file-uploadblueimp

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

javascriptreactjstypescripttypesmaterial-ui

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

javascripttypescriptpromisepixi.js

What steps can be taken to troubleshoot a form that is failing to save information?

I've created a registration form using PHP, and it asks for various information such as name, username, email, password (with confirmation), gender, and country. However, I'm facing issues with saving the first and last names to the database. It ...

phphtmlmysqlajax

Unusual JavaScript Bug: Uncaught TypeError - Unable to access property 'url' of null

I encountered a peculiar JavaScript error. The following message appears in the console: Uncaught TypeError: Cannot read property 'url' of null (Line 83) The code on Line 83 looks like this: var image = '<img class="news_image_options ...

javascriptjqueryajax

Replacing a DOM Element on Page Load using jQuery

I am looking to substitute the following HTML element: <input type="submit" id="send_product_enquiry" value="Send Enquiry" class="button"> with this updated version: <input type="submit" id="send_product_enquiry" onclick="ga('send', & ...

jquerywordpress

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Currently in the process of developing a custom directive for AngularJs that involves an image rotator based on a Jquery Plugin I created, you can check it out here Below is the code snippet for my directive: .directive('imageRotator', function ...

javascriptjqueryangularjs