How to click link that contains text

Question

I want to click a link that contains certain text. I have tried using an X-Path expression and that is not working. The application I am testing is Multi Page Application so I am not sure if the new page is generated.

The HTML:

<a class="text-major ev-pick-this-event" href="/cgi-bin/ncommerce3/SEGetEventInfo?ticketCode=GS%3AAMTX%3AHUSKERS%3ASLP2%3A&amp;linkID=BQFN80-AMTX&amp;shopperContext=&amp;pc=&amp;caller=&amp;appCode=&amp;groupCode=SLP&amp;cgc=&amp;dataAccId=129&amp;locale=en_US&amp;siteId=ev_BQFN80-AMTX">HUSKERS - SLP2 - Ranges</a>

What I have tried:

DislplayEventList.js

class DisplayEventListPage {
  async clickEventListLink(page) {
    const slp2ItemLink = await page.$x(
      '//a[contains(., "HUSKERS - SLP2 - Ranges")]'
    );
    await slp2ItemLink.click();
  }
}

module.exports = DisplayEventListPage;

navigate.test.js

const path = require("path");
const config = require("config");
const url = config.get("url");
const DisplayGroupListPage = require("../pageObjects/DisplayGroupList");
const DisplayEventListPage = require("../pageObjects/DisplayEventList");

let groupListPage = new DisplayGroupListPage();
let eventListPage = new DisplayEventListPage();

describe("Test Navigation", () => {
  beforeAll(async () => {
    await page.goto(url);
    await page.screenshot({ path: "groupListPage.png" });
    await groupListPage.clickGroupName(page);
    await page.screenshot({ path: "eventListPage.png" });
    await page.waitFor(3000);
    const pageURL = await page.url();
    console.log(pageURL);
    await eventListPage.clickEventListLink(page);
  });
  it('should be titled "evenue 1.5 | Online Ticket Office | HUSKERS - SLP2 - Ranges', async () => {
    await expect(page.title()).resolves.toMatch(
      "evenue 1.5 | Online Ticket Office | HUSKERS - SLP2 - Ranges"
    );
  });
});

Error I receive:

TypeError: slp2ItemLink.click is not a function

One useful technique is to do something like `const html = await page.content(); console.log(html)` to see what's on the page before you attempt that XPath selector. Otherwise, it's difficult to tell if the issue is the selector or the page not being where you expect it to be. — Jacob, Nov 12 '19 at 00:02

score 0 · Answer 1 · answered Nov 12 '19 at 00:04

try with contains selector:

setTimeout(()=>{
$("a:contains('HUSKERS - SLP2 - Ranges')").trigger("click");
console.log("go");
}
, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="text-major ev-pick-this-event" href="/cgi-bin/ncommerce3/SEGetEventInfo?ticketCode=GS%3AAMTX%3AHUSKERS%3ASLP2%3A&amp;linkID=BQFN80-AMTX&amp;shopperContext=&amp;pc=&amp;caller=&amp;appCode=&amp;groupCode=SLP&amp;cgc=&amp;dataAccId=129&amp;locale=en_US&amp;siteId=ev_BQFN80-AMTX" target="_blank">HUSKERS - SLP2 - Ranges</a>

take into consideration that first your user should interact with the page, or the click trigger will be ignored.

How to click link that contains text

1 Answers1