0

I have couple of text_area_field in my application which can be distinguished only by using the value inside it. How can I get a specific element using value?

Ex:

<div data-component="options"> <input data-component="text_area">Value 1</input> <input data-component="text_area">Value 2</input> <input data-component="text_area">Value 3</input> <input data-component="text_area">Value 4</input> 

I have tried cy.get('[data-component="options"] [data-component="text_area"]').contains('Value 3').clear().type('Edited 3'). but it is giving the error : Timed out retrying: Expected to find content: 'Value 3' within the element: but never did

Any help would be highly appreciated.

1
  • updated. It is kept jsu as a reference Commented Jul 21, 2020 at 4:46

2 Answers 2

1

Check if the div allows typing. If yes, try the below code and see if that is working:

cy.get('[data-component="options"] [data-component="text_area"]').each(($div, i) => { const valueText = Cypress.$($div).text(); console.log(valueText); if(valueText === "Value 3") { cy.wrap($div).clear().type("Edited 3"); } }) 

You could also try using eq(), but if there are changes in selector with more options it may fail.

cy.get('[data-component="options"] > div').eq(2).then(($div)=>{ cy.wrap($div).contains("Value 3").clear().type("Edited 3"); }) 

You could possibly try this one too:

cy.get('[data-component="options"] > div').contains("Value 3").clear().type("Edited 3"); 
Sign up to request clarification or add additional context in comments.

Comments

0

I think this will work .Try this code:

cy.get('[data-component="options"] > div').invoke('show').eq(2).then(($div)=>{ cy.wrap($div).contains("Value 3").clear().type("Edited 3"); }) 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.