css-selectorscypress

How to select data-cy locator if it contains a changeable attribute?

Lets assume I have a document storage and every document has a menu. Menu button has data-cy locator with the name of the document. How do I make it right in the code?

data-cy="PDF file # 1939-dropdown"

where '-dropdown' part is permanent and 'PDF file # 1939' is changing depends on file.

i am expecting something like

dropDownLocator = '{fileName}-dropdown'

But I dont know how to make it right.

Solution

  • If you have an attribute data-cy="PDF file # 1939-dropdown" on an element, you can find it in several ways.

    Exact match

    cy.get(`[data-cy="PDF file # ${fileName}-dropdown"]`)

    Starts-with match ^=

    cy.get(`[data-cy^="PDF file # ${fileName}"]`)

    Contains match *=

    cy.get(`[data-cy*="${fileName}"]`)

    Contains word match ~=

    cy.get(`[data-cy~="${fileName}-dropdown"]`)

    A complete list is here jQuery attribute selectors

    All the above inject the fileName using a template literal, which assumes you have the document number in a variable.

    An example with regex is shown here How can I use regex on an attribute value in cy.get()?. It explains the pitfalls and recommends jQuery attribute selectors instead.

    It also shows use of combined attribute selectors if you want to exclude part of the attribute value from the match (e.g you want all documents regardless of the document number).