Cypress angular test style inline on a svg-CodePudding

I have to test this svg, now don't ask me why, I need it and I'm doing some tests!

 <svg class="custom-background" width="1864" height="441" style="background: linear-gradient(to right, rgb(255, 255, 255) 3.21888%, rgba(255, 0, 0, 0.1) 3.21888%) 0% 0% / auto 381px no-repeat;">
 </svg>

In my text I wrote this:

  cy.get('svg')
   .should(`have.attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91.4872%, rgba(255, 0, 0, 0.1) 91.4872%) 0% 0% / auto 403px no-repeat`);

I'm just trying, because then in the future I'll have to insert percentages that come from dynamically calculated variables. But this is something else. The point is that already doing this gives me an error:

The chainer attr', 'style', 'background: linear-gradient(to right, rgb(255, 255, 255) 91 was not found. Could not build assertion.

I can't understand why, it's the first time I've done this kind of test, and I couldn't find much about it in the documentation...

CodePudding user response：

The error "The chainer attr', 'style', 'background: linear-gradient..." is appearing because you have the back-tick at the wrong place.

You have

`have.attr'

but that should be

'have.attr'

so replace the first back-tick with another matching single-tick.

Then the style value you want to match should start with a back-tick, so

`background: linear-gradient...`

instead of

'background: linear-gradient...`

Finally, to insert dynamic values use ${value}

for example

 const value1 = '91.4872%'
 const value2 = '381px'

 cy.get('svg')
 .should('have.attr', 'style', 
   `background: linear-gradient(to right, rgb(255, 255, 255) ${value1}, rgba(255, 0, 0, 0.1) ${value1}) 0% 0% / auto ${value2} no-repeat;`)

CodePudding user response：

Instead of adding the entire value of the style attribute, you can just add the value that you want to assert using include.

cy.get('svg')
  .should('have.attr', 'style')
  .and('include', '91.4872%')

CodePudding user response：

I have use something like this in tests that I run for checking theme packs. Im sure you will be able to adjust it to work for you.

    cy.get(elementSelector).should('have.css', 'background-color', 
      (rgb(255, 255, 255)))

Im not sure if this will work, but try

        cy.get(elementSelector).should('have.svg', 'background-color', 
          (rgb(255, 255, 255)))