CODEWITHSUNDEEP
automationcypress
Mehran Shafqat
Mehran Shafqat

Reputation: 510

Cypress Get Attribute value and store in Variable

I want to get the Attribute value and store in a variable how we can achieve this in cypress

In my case I want to get the complete class value and store it in variable.

This code just give me the attribute class value but how I can store the fetch value in variable

cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')

Upvotes: 13

Views: 33133

Answers (4)

Anshuman Dubey
Anshuman Dubey

Reputation: 31

Here is how I got the value of for attribute in a label tag which had text "Eat" inside.

cy.contains('Eat').then(($label) => {
    const id = $label.attr('for');
}

Upvotes: 3

Rafæl Ferreira
Rafæl Ferreira

Reputation: 111

A good way to solve this kind of scenario is to use the alias mechanism. One could leverage this functionality to enqueue multiple elements and then check all of them together by chaining the results. I've recently come to a case in an SPA where the assertion had to happen between elements that were spread across different angular routes (call them different pages).

In your use case, this would like:

cy.get('.searchable-group-selector-card-image')
  .eq(4)
  .invoke('attr', 'style')
  .as('style_1')

cy.get('.another-element')
  .invoke('attr', 'style')
  .as('style_2')


// later on for example you could do
cy.get('@style_1').then(style_1 => {
  cy.get('@style_2').then(style_2 => {
    // Both values are available and any kind of assertion can be performed
    expect(style_1).to.include(style_2)
  });
});

This is described in Variables and Aliases section of the Cypress Documentation.

Upvotes: 8

Joseph Mutidjo
Joseph Mutidjo

Reputation: 133

I was trying to compare the style of one element with another to make sure they were equal. Here's the code that seems to work for me.

cy.get('.searchable-group-selector-card-image')
  .eq(4)
  .invoke('attr', 'style')
  .then(($style1) => {
    const style1 = $style1
  })

Upvotes: 8

Mr. J.
Mr. J.

Reputation: 3731

Most important thing is to get the selector right, so it exactly finds the value you are looking for. In this case you already found it. By using then() gives you the ability to store it in a variable.

cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
  .then($growl-message => {
    const message = $growl-message.text()
    //do the checks with the variable message. For example:
    cy.contains(message)
  })

Note that the scope of the variable is within the curly brackets. Thus using the variable has to be within those curly brackets.

Upvotes: 0

Related Questions