Using Selenium Webdriver to target and trigger an onclick event through a CSS selector on a flight booking

I've been running an automation test on the website . When searching for a flight, I encountered an issue where I was unable to click on a particular flight. I initially tried using Xpath but it wasn't able to locate the element when it was at the bottom or middle of the page, prompting me to resort to the following solution:

JavascriptExecutor jsx2 = (JavascriptExecutor)driver;
jsx2.executeScript("window.scrollBy(0,750)", "");

driver.findElements(By.xpath("//a[text()='Select']")).get(15).click();

However, I am looking for a way to achieve this without having to scroll to a specific position since different screens may have different sizes.

I also attempted using CSS selectors but unfortunately, that did not yield success either.

javascriptselenium-webdrivercss-selectors

Answer №1

Check out this xpath solution:

driver.findElement(By.xpath("//a[contains(@class, 'btn-primary')]")).click();

If that doesn't work, try:

driver.findElement(By.xpath("//li[contains(@id, 'result_0')]/div/div/div/div[2]/a")).click();

Take a look at these resources for more information:

  • Getting the Nth child of a node using xpath

  • Xpath changes after page is loaded each time

Answer №2

Enclose the following script within executeScript()

const allFlightLinks = document.querySelectorAll(".booking-item-flight-details .booking-item-arrival a");

for(let i=0; i<allFlightLinks.length; i++) {
   allFlightLinks[i].click();
}

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

Strangely, the quirks of the .hover() function on iOS

I'm finding it puzzling why .hover() is acting differently on iOS. On my desktop, I have a portfolio gallery with images that link to individual pages of my work. When hovering over an image, it slightly fades and a title animates in. However, when I ...

javascriptjqueryios

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

I am attempting to execute an AJAX call in my static file index.html to a React endpoint, but instead of the desired response, I am seeing the React homepage. Here is the code snippet from my index.html: <div id="data"></div> <scr ...

javascriptreactjsajax

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

Implementing Multiple Identification using JavaScript and PHP

I need to complete a simple task. Here is the code snippet: echo' <div class="col-sm-12" id="recensioni_titolo"> <form role="form" id="review-form" method="post" action="php\insert_comment.php"> ...

javascriptphphtmlattributes

Passing the AngularJS ng-model from a template to a directive's controller

I have created a directive with a controller that is responsible for building a form to post comments to an API through CommentsService Here is a snippet of how my directive looks: app.directive('appComments', function( CommentService ) { r ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-model

Full-screen modal fade not functioning properly

I am trying to implement multiple fullscreen modals on a single page, but I am facing an issue where they slide in and out at an angle instead of just fading in and out. I have been unable to achieve the desired effect of a simple fade transition. If you ...

javascripthtmlcssmodal-dialog

What is the best way to display an international phone number using Angular Material V6?

I've been working on a project that utilizes Angular Material V6. My goal is to display international phone numbers with flags in a Material component text box. After some research online, I came across an npm module that achieved this but it was tail ...

javascriptjqueryangular5angular-material2

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

javascripthtmlcss

How to dynamically reference an input textbox ID using javascript or jquery

I have a button titled: GridView1__ctl2_AddButton0 While I can extract the middle part "ctl2" (and variations for each row), I am trying to use it to populate a textbox among many with similar names. GridView1__ctl2_txtStormTimeOn Currently, I could ac ...

javascriptjquery

jQuery show/hide functionality allows you to toggle the visibility of elements

I am looking to create a toggle button that expands the menu-wrapper width and hides the sidebar when clicked. Here is the initial CSS styling: #my-wrapper { Width:500px; } #sidebar-wrapper { width:200px; } Upon clicking the button, the CSS will update ...

javascriptjqueryhtmlcss

Ways to make a button blink using AngularJS

Currently working on an AngularJS SPA application where a button is present in the front-end HTML page. When this button is clicked, it triggers an operation which takes some time to complete. I want to inform the user that the operation is still in prog ...

javascriptangularjshtmlcss

Unable to impose a restriction on the number input field limit

My input field has a type of "number" with the min and max attributes applied to limit user input. However, I am facing an issue where users can still enter values beyond the set limit. How can I prevent users from entering values above the specified lim ...

javascripthtmlangulartypescript

What is the best way to define a default value for a v-text-field in Vuetify within a Nuxt.js project?

As a beginner with vuejs and nuxtjs, I have been introduced to vuetify at my workplace. I am currently trying to set the default value of 0 for v-text-field fields in the application, but unfortunately, I cannot seem to find this information in the vueti ...

javascriptvue.jsnuxt.jsvuetify.js

Having trouble sending certain keys with the send_keys function in Selenium Chrome driver

Having trouble inserting text into a login textbox using Selenium and Python with the Chrome driver. To start, I set up the driver like this: from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_condition ...

pythonseleniumselenium-webdriver

Error: The configuration object provided for initializing Webpack does not adhere to the correct API schema in Next.js. This results in a ValidationError due to the invalid configuration

When I used create-next-app to set up my next.js project, everything seemed fine until I tried running npm run dev and encountered this error: ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that doe ...

javascriptnode.jswebpacknext.js

The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database. However, when I trigger this form, an error occurs. See example of the error <input id=" ...

javascripttypescriptvue.js

Tips for resolving the issue of the '$interval is not a function' error in AngularJS

When I click on the up/down arrows, I am attempting to continuously increase/decrease a value using AngularJS $interval function. However, I keep encountering an error message that says "TypeError: $interval is not a function." Can someone please help me s ...

javascriptangularjs

Tips on revitalizing a bootstrap wizard

In my JSP file, I am using a Bootstrap wizard. You can see the wizard layout in the following link: The wizard allows me to add employee elements that are stored in a JavaScript array (I also use AngularJS). At the final step of the wizard, there is a su ...

javascriptjqueryangularjsjsp

Examine information from two different tabs within a web browser using Selenium

On the first page, I display items with prices. When you click the "View Deal" button, a new tab opens with more details and pricing on the second page. My main objective is to compare these prices, but I am encountering a problem. When trying to retrieve ...

javaseleniumselenium-webdriverwebdriver

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

javascriptjqueryhtmlcssajax