I have 2 selectbox country and city This selectboxs interdependent i used intercept for city selectbox
before(() => {
cy.viewport(1280, 720); cy.visit(url) cy.url().should("include", url) loginPageContent_.formEmailInput() .type('user') loginPageContent_.formPasswordInput() .type('pass') loginPageContent_.formButton() .click(); }); beforeEach(() => { cy.viewport(1280, 720) }) it("wait the form elemnets", () => { cy.wait(5000) cy.visit(urlTwo) cy.wait(5000) cy.url().should("include", urlTwo) }) it("select item in selectbox ", () => { // click the country selectbox cy.xpath('//countrySelecbox').click() // select the country item in selectbox cy.xpath('//countrySelecboxItem').click() cy.intercept({ method: 'GET', url: 'get-city-by-country/3', }, { statusCode: 200, body: { data: [{ id: 4, code: '34', countryId: 3, name: 'city1' }, { id: 5, code: '34', countryId: 3, name: 'city2' }] }, }).as('interceptEndpoint') cy.wait('@interceptEndpoint') })
This code working and select the country selectbox and my city drop
is get my intercept citys (city1,city2)
and im add a anaother test block and my code not click the country button. note: ım sure this is not a scope problem
it("select item in selectbox ", () => {
// click the country selectbox cy.xpath('//countrySelecbox').click() // select the country item in selectbox cy.xpath('//countrySelecboxItem').click() cy.intercept({ method: 'GET', url: 'get-city-by-country/3', }, { statusCode: 200, body: { data: [{ id: 4, code: '34', countryId: 3, name: 'city1' }, { id: 5, code: '34', countryId: 3, name: 'city2' }] }, }).as('interceptEndpoint') cy.wait('@interceptEndpoint') }) it("Step 1: open selectbox ", () => { cy.xpath("//citySelecbox").click() })