how to invoke or get the sub-property value from Properties Tab in cypress

Viewed 271

How to invoke the sub-property value from the properties tab. I need to get the value of the error.JPG in from Properties Tab

image1

image2

I tried with these different codes changes

cy.get('div [data-text-as-pseudo-element="error.JPG"]').invoke('prop','dataset').should('contain','error.JPG')

cy.get('div [data-text-as-pseudo-element="error.JPG"]').invoke('prop','dataset').should('contain','DOMStringMap')

cy.get('[data-text-as-pseudo-element="error.JPG"]').invoke('prop', 'dataset').then(dataset,()=>{
        cy.wrap(dataset).invoke('prop','textAsPseudoElement').should('contain','error.JPG')
    })

I'm getting Assertion Error

Timed out retrying after 4000ms: object tested must be an array, a map, an object, a set, a string, or a weakset, but domstringmap given
1 Answers

From HTMLElement.dataset

The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.

Your Cypress test can just treat it as a conventional attribute

cy.get('my-selector')
  .should('have.attr', 'data-text-as-pseudo-element', 'error.JPG')

The tests you propose above are already complete with just this

cy.get('div[data-text-as-pseudo-element="error.JPG"]')

because the browser guarantees the attribute will be added to dataset.


If you want to work further with dataset in Javascript just chain the properties, e.g

cy.get('div[data-text-as-pseudo-element="error.JPG"]')
  .should($el => {
    const attrValue = $el[0].dataset.textAsPseudoElement
    expect(attrValue).to.eq('error.JPG')  
  })
Related