Cypress - Get a string selector from html with space on it

Question

I need to retrieve a selector from HTML with a space on it.

    <mat-radio-button
        *ngFor="let element of data"
        [attr.data-test]="'radio-buttons-' + element.value">
    </mat-radio-button>

element.value got the value of "My pictures"

Cypress cannot find the selector "radio-buttons-my pictures" and do the click.

cy.getBySelector('radio-buttons-My pictures').click();

What does the element look like in the DOM, after the variable has been resolved? — agoff, Apr 10 '23 at 16:21
Hello @agoff. My pictures - as you can see there is a space on the begging, between words and at the end — Hugo Seleiro, Apr 10 '23 at 16:23
Can you give the full HTML for the element? You don't include the `data-test` attribute in your response. — agoff, Apr 10 '23 at 16:45
The easiest would be to just replace all empty space in element.value with a dash: `element.value = element.value.replace(/\s+/g, '-').toLowerCase();` somewhere in ts loop before displaying it in template. — Misha Mashina, Apr 10 '23 at 17:26
What is this `cy.getBySelector()` function? How does it handle the arg that is being passed in? — DJSDev, Apr 10 '23 at 18:16
Hello @agoff, thank you !! I will go with these answers. Thank you very much — Hugo Seleiro, Apr 10 '23 at 18:57

score 0 · Answer 1 · answered Apr 10 '23 at 18:28

0

As mentionned by Misha Mashina in the comments, you can replace your spaces by other element, like a dash.

On your template, you iterate over an array of objects, so once you get your data, you can just add an attribute to your objects like this :

data = data.map(elem => {
  return {...elem,'data-test-value':elem.value.replace(/\s/g,'-')}
})

By doing this, you will have your value element with the original value, and the formatted one for your dataset attribute.

answered Apr 10 '23 at 18:28

Alexis

Hello @Alexis, thanks for the help. im getting this error , Property 'replace' does not exist on type 'unknown'. can you help me ? – Hugo Seleiro Apr 10 '23 at 19:25
@HugoSeleiro, if you are sure there is only "string" in your `value` attribute, you can cast it before using `replace`. Like this `(elem.value).replace(/\s/g,'-')` – Alexis Apr 11 '23 at 06:20

1 Answers1