What is the method to select a hyperlink that includes a variable in the "href" attribute and click on it?

Currently, I am in the process of creating acceptance tests utilizing Selenium and WebdriverIO. However, I have encountered a problem where I am unable to successfully click on a specific link.

client.click('a[href=#admin/'+ transactionId + ']')

The variable 'transactionId' holds the ID of the transaction. Below is a snippet of my HTML code:

 <div class="ui-data-table">
<thead>...</thead>
<tbody>
<tr><td class="tac">
  <span class="tooltip" title="Transaction"><i class="icon-transaction"></i></span>


</td>
<td class="tac no-break">Today 10:23</td>
<td class="break-all"></td>
<td class="tac">
    N/A
</td>
<td>Artem</td>
<td class="tac">
  <span class="tooltip" title="Pending">

    <i class="icon-clock"></i>


  </span>
</td>
<td class="break-all">Artem Arsenowitch</td>
<td class="tac">
    <a href="#admin/aceb3f65-4078-4f47-8850-95ac9135fad3"><i class="icon-arrow-circle-right"></i></a>
</td></tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</div>

Each "tr" tag follows the same structure as displayed above with an "a" tag containing the appropriate id within the href attribute. The issue lies in this piece of code:

('a[href=#admin/'+ transactionId + ']')

which results in 

(a[href=#admin/undefined])

While I appreciate Girish Sortur's input, I was only able to resolve the issue using the following revised code snippet:

.getAttribute("p.tac", "transaction-id")
        .then(function(attr){
          transactionId = attr;
          transactionURL = 'a[href="#admin/'+ transactionId + '"]';
        })
        .click('a[href="#admin"]')
        .waitForExist("div.ui-data-table", 10000).then(function(){
          client.click(transactionURL)//This now functions correctly
        })
javascriptseleniumselenium-webdriverwebdriver-iowebdriverjs

Answer №1

When working with Selenium, it is important to first locate the element before attempting to click on it, as the click() method does not accept any arguments. You can achieve this by following these steps - 

driver.findElement(by.xpath('a[href="#admin/'+ transactionId + '"]')).click();

If you are using webdriver-io in conjunction with Selenium, make sure that your transactionId is generated before attempting to click on it, as async JavaScript functions may execute quickly without waiting for the transaction-id to be available. Here's how to handle this scenario -

.waitForExist("p.tac", 10000)
.getAttribute("p.tac", "transaction-id")
.then(function(attr){ 
    transactionId = attr; 
})
.click('a[href="#admin"]').waitForExist("div.ui-data-table", 10000)
.waitForVisible('a[href="#admin/'+ transactionId + '"]', 10000)
.click('a[href="#admin/'+ transactionId + '"]');

I hope this explanation proves useful.

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

Having trouble getting the jquery tabify plugin to work properly

I've put in a lot of effort and double-checked everything, but for some reason this tabify function just won't work. I have gone through my code 100 times but still can't seem to pinpoint the error. Here is the code I am working with: <! ...

javascriptjquerycss

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

I am currently working on my initial Laravel project, incorporating Vuejs for the frontend. One of the key features of my application is allowing a Super admin to log in as a User (impersonate). By clicking on the Impersonate Button, the word impersonate g ...

javascriptlaravelvue.jsinertiajs

Attempting to extract data from a webpage by utilizing Selenium in a newly opened tab

Recently, I successfully utilized Selenium to launch a webpage in a new tab on my Chrome browser. The webpage is loaded with a huge table of valuable data that I need to extract using Beautiful Soup. However, when attempting to execute my code, the followi ...

pythonpython-3.xseleniumbeautifulsoup

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

Vue.js custom confirmation component failing to open within v-menu

I am having trouble displaying a confirmation component every time a button in the header is clicked. Currently, it only opens when clicking elements outside of the dropdown using v-menu. App.vue <template> {{isConfirmDialogVisible}} <div cla ...

javascriptvue.jsnuxt.jsvuetify.js

Sending data to a PHP page to maintain state in an Angular application

Here is my current setup: In a dynamic Angular environment, I have various states connected to PHP pages. These PHP pages rely on specific data variables, typically provided as GET parameters outside of Angular. Now, I am looking for a way to switch to a ...

javascriptphpangularjsajaxangular-ui-router

When trying to navigate through the PayPal login page, the Selenium webdriver abruptly stops without providing any error message

I'm facing an issue while trying to automate the payment process on paypal.com. After successfully loading the login page () and entering the email, the web driver unexpectedly closes when I click the next button without any error message appearing. ...

pythonseleniumpaypalwebautomation

Store the response data in a global variable or forward it to another function in Node.js using Express JS

I'm currently working on a function that makes a post request to an API (app.post), sending a token and a URL for redirection to webpay. The challenge I'm facing is saving that token in a global variable so that it can be accessed by another func ...

javascriptnode.jsexpressweb

Is there a way to switch between showing and hiding all images rather than just hiding them one by one?

Is there a way I can modify my code to create a button that toggles between hiding and showing all images (under the user_upload class), instead of just hiding them? function hidei(id) { $('.user_upload').toggle(); Any suggestions would be grea ...

javascriptjqueryhtmlcsshide

Insert the user's choice as a MenuItem within the Select component

I currently have a default list of options for the user. However, I want to allow users to add their own category dynamically. This will trigger a dialog box to appear. How can I modify my code so that the value property starts from number 4? Take a look ...

javascriptreactjsmaterial-ui

Using app.js in a blade file can cause jQuery functions and libraries to malfunction

In my Laravel application, I am facing an issue with my vue.js component of Pusher notification system and the installation of tinymce for blog posts. Adding js/app.js in my main layout blade file causes my tinymce and other jQuery functions to stop workin ...

javascriptphpjquerylaravelvue.js

Move the location of the mouse click to a different spot

I recently received an unusual request for the app I'm developing. The requirement is to trigger a mouse click event 50 pixels to the right of the current cursor position when the user clicks. Is there a way to achieve this? ...

javascriptcss

Problems with Selenium causing Google to crash during test executions

from selenium import webdriver from selenium.webdriver import Keys from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.common.by import By s = Service(ChromeDriverManager( ...

pythonseleniumselenium-webdriverselenium-chromedriverwebdrivermanager-python

Is there a way to retrieve the initial value from the second element within the JSON data?

Exploring JSON Data Collections In my JSON data, I have two collections: FailedCount and SucceededCount. { "FailedCount": [{ "FailedCount_DATE_CURRENT_CHECK": "2016-11-30 10:40:09.0", "FailedCount_DATE__CURRENT__CHECK": "10:40:09", "FailedCo ...

javascripthtmljsonreturn-value

Differences between async/await and then methods in React, demonstration shows that only async/await is functional. Why is

Trying to understand and implement two different API data fetching methods in React app development. The first method involves using the JavaScript Fetch API, while the second method utilizes the async/await syntax. I am currently experimenting with both a ...

javascriptreactjspromisefetch-api

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

javascriptjqueryhtmlcsstwitter-bootstrap

Using an Ajax XML object to dynamically set images in a DataList

When making an Ajax call to retrieve an XML response and trying to set image names from the XML on a datalist, I encountered some issues. The code snippet I used for setting the image is as follows: $(".Image", tablex).attr('src', product.find( ...

javascriptjqueryajaxxml

Here is how you can pass two callback functions to React.cloneElement:

Recently, I encountered an issue where one of the callbacks passed to a child component using React.cloneElement was always present while the other was undefined. Specifically, activeRow was consistently available but deactivateRow remained undefined. I ...

javascriptreactjs

Arranging a JSON array based on the numerical value within an object

I am interested in sorting an array from a json file based on distances calculated using the haversine library. The purpose is to find geolocations near a specified value and display the closest results first. function map(position){ var obj, ...

javascriptjsonsortingobjectnumeric

Troubleshooting Next.js server actions with ESLint error detection

I encountered eslint errors while developing a basic server component with server action: // /app/search/page.tsx export default function Search() { async function updateResults(formData: FormData) { "use server"; await new Promise((r ...

javascriptreactjsnext.jseslint