To extract value from a listbox using Cypress

Question

 <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth" data-testid="timezone-input"> <div class="MuiInputBase-root MuiInput-root MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"> <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect" tabindex="0" role="button" aria-haspopup="listbox">Europe/London</div> <input type="hidden" value="Europe/London"> <svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M7 10l5 5 5-5z"></path></svg></div></div>

How do I extract the value from the listbox using cypress? I used the following code

cy.get('[data-testid="timezone-input"] div div').invoke("val").should("eq", "Europe/London");

but i get CypressError: Timed out retrying: expected '' to equal 'Europe/London

Please indent your HTML, it's hard to read.

guillaume.deslandes
– guillaume.deslandes

2019-11-04 13:31:25 +00:00
Commented Nov 4, 2019 at 13:31 — guillaume.deslandes
– guillaume.deslandes, Commented Nov 4, 2019 at 13:31

guillaume.deslandes · Accepted Answer · 2019-11-04 13:30:59Z

1

Not sure if you want to check the content of the div or of the input, but I'd try either one of these.

For the div:

cy.get('[data-testid="timezone-input"] div div').contains('Europe/London');

For the input:

cy.get('[data-testid="timezone-input"] input').should('have.value', 'Europe/London');

answered Nov 4, 2019 at 13:30

guillaume.deslandes

1,38910 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tanya Over a year ago

Thanks guillaume.deslandes for the answer. I want to extract the current time.zone value say 'europe/london' and verify whether the same timezone settings is reflected in another page. I used the following code

this.timevalue = cy.get('[data-testid="timezone-input"] input'); assert.equals(this.timevalue, "Europe/London", "equals");

. I get TypeError: assert.equals is not a function

guillaume.deslandes Over a year ago

Did you try my second command? You cannot store Cypress get result directly, it returns a Promise-like object that they use to chain commands. Have a look at their doc docs.cypress.io/guides/core-concepts/…

Tanya Over a year ago

Yes I am trying your second command to change the value from 'Europe/London' to 'GMT' using cy.get(TIME_ZONE_INPUT).type("GMT"); but i get the CypressError: Timed out retrying: cy.type() failed because this element is not visible: <input type="hidden" value="Europe/London"> This element '<input>' is not visible because it has CSS property: 'display: none' Fix this problem, or use {force: true} to disable error checking.

guillaume.deslandes Over a year ago

I'm not familiar with MUI, but if the input is hidden, there should be a better target for Cypress type command. Try to inspect your page to know what is usable. Or you could try to force the typing with cy.get(TIME_ZONE_INPUT).type("GMT", { force: true }); but this should be a last resort... You can use the selector playground in Cypress GUI (the target icon, left side of address bar).

Tanya Over a year ago

Thanks guillaume.deslandes for your response. The below code helped cy.get('[data-testid="timezone-input"] div div') .click() .get('[data-value="GMT"]') .click();

Collectives™ on Stack Overflow

To extract value from a listbox using Cypress

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related