Cypress - Как ждать XHR-запроса

Question

Я новичок ie до cypress, поэтому, пожалуйста, будьте терпеливы со мной. ;-) Я уверен, что это простой вопрос, и я уже прочитал документацию cypress, но в моем тесте cypress что-то все еще кажется неправильным. Я хочу дождаться завершения запроса xhr, когда нажимаю на другой язык страницы, которую хочу протестировать. Это работает, когда я использую wait(5000), но я думаю, что есть лучший способ дождаться завершения запроса xhr, чем 5 секунд. Это мой код Будем благодарны за любую помощь или подсказки:

describe('test',() => {
    it('should open homepage, page "history", click on English language, click on German language',() => {
        cy.server();
        cy.route('POST','/ajax.php').as('request');
        cy.visit('http://localhost:1234/history');
        cy.wait('@request');
        cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});
        cy.route('POST','/ajax.php').as('request');
        cy.wait(['@request']);
        //cy.wait(5000); // <- this works, but seems to be not the best way
        cy.get('h2').should(($res) => {
            expect($res).to.contain('History');
        })
        cy.get('.dataContainer').find('.container').should('have.length', 8);
    });
});

Последняя проверка

cy.get('.dataContainer').find('.container').should('have.length', 8);

не удалась, поскольку запрос xhr еще не завершен. Запрос xhr запускается, когда щелчок по значку сделан:

cy.get('div[class="cursorPointer flagSelect flag-icon-gb"]').click({force:true});

Вот изображение запроса xhr, если это помогает найти ошибку:

Спасибо за любую помощь.

Answer 1

Вы уверены, что эта строка правильная? В противном случае cy.wait не будет работать так, как вы хотите.

cy.route('POST','/ajax.php').as('request');

Я ожидаю что-то вроде

cy.route('GET','/endpoint').as('request');

Вы можете посмотреть, какой это маршрут, с помощью инструментов разработчика (F12 в Chrome). Go в сеть, чтобы отслеживать, какие типы XHR загружаются при открытии вашей страницы.

Узнайте URL-адрес и метод запроса - пример с bing.com

Также: Я предпочитаю включать команду cy.server () и cy.route () в beforeEach. Тогда вам нужен только cy.wait () в самом тесте. См. https://docs.cypress.io/guides/references/best-practices.html#2 -Run-shared-code-before-each-test для получения дополнительной информации об этом.

Answer 2

вы должны сделать так:

describe('test',() => { //no here async mode
    it('should open homepage, page "history", click on English language, click on German language', async () => { //but here
        cy.server();
        cy.route('POST','/ajax.php').as('request').as('requestToWait); // as-construction
        const requestToWait = await cy.wait('@requestToWait');//here we are waiting and getting response object
        // any other code
});