Cypress click не прокручивается в поле зрения

Question

Сайт встроен в Vue / Nuxt , имеет SSR и имеет ссылки в нижнем колонтитуле.

При проверке ссылка найдена, ссылка видима, а click() говорит, что ссылка не отображается .

После неудачного щелчка ссылка прокручивается до представление.

Что может привести к тому, что представление не будет прокручиваться в представление?

        it('About us page', () => {
            cy.visit('https://test.fooddocs.ee');
            cy.url().should('include', 'https://test.fooddocs.ee');
            cy.get('footer.page-footer').within(() => {
                cy.get('a')
                    .contains('About us')
                    .should('be.visible')
                    .should('have.attr', 'href', '/about')
                    .click();
            });
            cy.url().should('include', siteUrl + '/about');
            cy.get('main h1').should('contain', 'Our team');
        });

Answer 1

Сообщение об ошибке на скриншоте «Центр этого элемента скрыт» указывает на то, что Cypress смог найти элемент, но не смог выполнить «щелчок». {Force: true} или .scrollTo ('bottom') могут на самом деле не работать лучше. Одной из альтернатив для теста было бы имитировать c клик, посещая основной URL. Если намерение состоит в том, чтобы проверить это «щелчком», необходимо провести дополнительное расследование, почему центр элемента не виден. Пожалуйста, прочтите ниже.

.should('have.attr', 'href', '/about')
            //.click();
            .invoke('attr','href')
                .then((url)=>{
                    cy.visit(siteUrl + url);
                });

Я думаю, что {force: true}, кажется, работает, но по существу не выполняет задачу, следовательно, URL все еще не перенаправляется (ни страница не перезагружается) по желанию. см. ниже, тест не пройден.

Кроме того, прокрутка вниз кажется успешной, но мы видим прокрутку страницы только после того, как тест прошел уже провалился. См. Ниже.

Answer 2

1. Click метод является своего рода имитацией поведения пользователя приложения. Мое предложение состоит в том, чтобы попробовать trigger(click), который немного отличается - я считаю, что в этом случае trigger(click) относится к Элементу Click , который обрабатывается Элементом DOM . - https://docs.cypress.io/api/commands/trigger.html#Syntax

2. Другое решение, которое я могу придумать, может быть своего рода обходным путем, но в конечном итоге будет полезно - попробуйте установить другую позицию на click(), чем center, потому что Cypress по умолчанию устанавливает положение, чтобы всегда щелкать по центру элемента, с которым вы хотите взаимодействовать. Например, click(left) - проверьте документацию Cypress - https://docs.cypress.io/api/commands/click.html#Arguments