Cypress vue.js: CypressError "Timed out retrying: Expected to find content"

0
votes

Problem description

CypressError: Timed out retrying: Expected to find content: 'mm' within the element: but never did.

I have mounted the component on cypress with mock data. Then I tried to get an element using below source code and receive the above error:

cy.get('#edit-highlights-form1').contains('2m');

Current situation

I have a vue.js application which contains a component and it consumes data from an API. Please find the source code below that I tried to write unit test for that component using Cypress.

Code:

describe('Edit highlights component ', () => {
    beforeEach(mountVue({
            template,
            components,
            data
        }))

    it('Stub the mock data to the component edit highlights', () => {

        cy.server();
        cy.route({
            method: 'GET',
            url: '/drupal/api/v1/getHighlightData/*',
            response: data().highlightModel

        }).as('apiHighligihtData');
        mountVue({
            template,
            components,
            data
        });
        cy.get('#edit-highlights-form1').contains('2m');
    });
});

I got the tutorial from https://github.com/bahmutov/cypress-vue-unit-test/blob/master/cypress/integration/ajax-list-spec.js

1
vue.jscypress
you need to provide more information. Either access to the source code of the webpage or enough screenshots of the application / Test result to provide context. All anyone can tell from this question is that Cypress didn't find the text "2m" inside the element '#edit-highlights-form1' – bkucera
Hi and welcome to SO! I moved your question to the top of your post and applied some proper code formatting. As mentioned in the comments please add a bit more details to your post so that other users may assist you to find your problem. Good luck! – SaschaM78
@bkucera I have hard coded text '2m' inside the element. But I was not able to get the element '#edit-highlights-form1' using the cypress command cy.get(). I solved this issue by using the command cy.get("#edit-highlights-form1").should( "have.value", '2m' ); – Vijeeshkumar vofox

1 Answers

0
votes

I was not able to get the element #edit-highlights-form1 using the cypress command cy.get(). I solved this issue by using the command cy.get("#edit-highlights-form1").should( "have.value", '2m' );