• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

208
Views
How can I user regex in cy.get()?

The application has list of items in a table and items have [id=item[0].setupCost, id=item[1].setupCost, id=item[2].setupCost] etc.

There's a functionality to add items also, so the index keeps on increasing.

I want to get input field regardless of using magic numbers. For eg (cy.get('[id=item[some_regex].setupCost]')

9 months ago · Juan Pablo Isaza
3 answers
Answer question

0

In case you need another answer:

You can use a regex if you add a jQuery extension.

It works because Cypress uses jQuery internally, and you can modify selector behavior by extending jQuery.

it('finds multiple ids by regex', () => {

  const $ = Cypress.$
  $.extend(
    $.expr[':'], {
      idRegex: function(a, i, m) {
        const regex = new RegExp(m[3], 'i');
        return regex.test(a.getAttribute('id'));
      }
    }
  )

  const regex = 'item\\[\\d+\\].setupCost' 

  cy.get(`input:idRegex(${regex})`)
    .its('length')
    .should('eq', 3)   // ✅
})

Put the jQuery extension in /cypress/support/index.js to use it globally.

Note in the regex we have to double-escaped because we pass in a string not a regex.

9 months ago · Juan Pablo Isaza Report

0

The regex that applies is \[id="item\[\d+\].setupCost\].

Enclose the regex in forward slashes, not quotes.

cy.get(/\[id="item\[\d+\].setupCost\]/)

But don't use it

This syntax is undocumented - it works (in Cypress v9.5.0) but it only returns one result.

So if you want to count your items, this will fail

cy.get(/\[id="item\[\d+\].setupCost\]/)
  .its('length')
  .should('eq', 3)   // ❌

Partial attribute selector

If you want to use partial attribute selectors, this is strongest as it includes .setupCost

Ref Find the element with id that starts with "local-" and ends with "-remote"

cy.get('[id^="item"][id$=".setupCost"]')  // use "starts-with" and "ends-with" selectors

This succeeds with the count test

cy.get('[id^="item"][id$=".setupCost"]')
  .its('length')
  .should('eq', 3)   // ✅
9 months ago · Juan Pablo Isaza Report

0

You could create a custom Cypress command that would insert the index for you. Below, I'm assuming the id you're referencing is the ID of the element and is a standard CSS selector

Cypress.Commands.add('getItemById', (index) => {
  return cy.get(`#item\\[${index}\\].setupCost`)
});


cy.getItemById(0)...
9 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.