How to click on a link which contains a variable into "href" attribute?

Question

I am writing acceptance tests using Selenium + WebdriverIO. And I have some problems with that - I can't click on this link

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

transactionId - it is a variable which contains ID of transaction. 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>

Every "tr" tag has the same structure as you can see above and "a" tag with appropriate id inside href attribute. The main problem consist in this code:

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

because it returns

(a[href=#admin/undefined])

Girish Sortur Thanks for you answers, but I found only one solution using this code:

.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)//That is working now
        })

Not an expert in this language but try client.click('a[href="#admin/'+ transactionId + '"]') — Corbin, Sep 02 '15 at 14:41
Please add the HTML of the element you are trying to click (and the surrounding HTML, as relevant) along with the code you are using to get and click the element. — JeffC, Sep 02 '15 at 14:47
Seems like this solution should work, but webdriver returns `no such element ("a[href="#admin/undefined"]")` but should return something like `("a[href="#admin/"665f5344-b4e8-44e3-ab51-893dcf7bcec1""]")` — Arsenowitch, Sep 02 '15 at 14:50
@Arsenowitch can you tell us how your getting the `transactionId` ? — giri-sh, Sep 02 '15 at 14:59
`.getAttribute("p.tac", "transaction-id").then(function(attr){ transactionId = attr; })` — Arsenowitch, Sep 02 '15 at 15:02
@Arsenowitch Updated answer to include webdriver-io syntax. Hope it helps. Let me know if still there is an error. Solution is to wait for transactionId to return before clicking it. — giri-sh, Sep 02 '15 at 15:05
@Girish Sortur, now my code looks so: `.waitForExist("p.tac", 10000) .getAttribute("p.tac", "transaction-id").then(function(attr){ transactionId = attr; }) .click('a[href="#admin"]') .waitForExist("div.ui-data-table", 10000) .click('a[href=#admin/'+ transactionId + ']')` But when I run it - this code returns "undefined" for "transactionId" variable — Arsenowitch, Sep 02 '15 at 15:22

giri-sh · Accepted Answer · 2015-09-03T07:38:17.990

3

Using only Selenium, you should find the element first and then click it because click() method doesn't take an argument. Here's how you can do it -

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

However if you are using webdriver-io along with selenium then make sure your transactionId is getting generated first and then click it as async javascript executes quickly without waiting for transaction-id to return. Here's how -

.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 + '"]');

Hope this helps.

edited Sep 03 '15 at 07:38

answered Sep 02 '15 at 14:44

giri-sh

6,934
2
25
50

I dont know what exactly went wrong but it returns error: "An element could not be located on the page using the given search parameters." – Arsenowitch Sep 02 '15 at 15:38
Can you provide your complete error if possible? It would be helpful if you can create a gist of your code too. – giri-sh Sep 02 '15 at 15:43
I get only error described above. On "admin table" which I get when click on `a[href="#admin"]` I can see list of transactions, each of them has link looks like: `Details of transaction` – Arsenowitch Sep 02 '15 at 16:01
probably `waitForVisible()` should help you then. Updated answer with this code. – giri-sh Sep 02 '15 at 17:01
This code still returns error: "element (a[href=#admin/undefined]) still not visible after 10000ms" – Arsenowitch Sep 03 '15 at 07:24
Can you provide your html code or create a gist of it? and is your link in view when the link appears on the page? also try to console.log the transactionId and see if its returning anything. Probably sleep for few seconds might help. – giri-sh Sep 03 '15 at 07:42
@ Girish Sortur, I added the description above. – Arsenowitch Sep 03 '15 at 08:29

How to click on a link which contains a variable into "href" attribute?

1 Answers1