Обработка наведения на меню с помощью Cypress

Question

Обработка наведения на меню с помощью Cypress

4

Я недавно наткнулся на инструмент e2e - Cypress.io. В настоящее время я занимаюсь POC для фирмы, с которой я работаю, для тестирования e2e реактивного приложения. Он имеет наведение над меню, как и большинство веб-приложений.

Пример:

URL: Fmovies

Я пытался щелкнуть элемент меню из этого наведения, но тест не показал, что на display установлено значение none.

В Selenium мы используем метод moveElement для перехода к этому элементу, а затем делаем все, что нам нужно. Однако я не могу это сделать, используя Cypress.

Учитывая текущее меню, я написал это

it('goes to specific element in Genre',()=>{
        cy.get('#menu').within(()=>{
            cy.get('ul').within(()=>{
                cy.contains('Family').click();
            });
        });
    });

Ошибка:

demouser123 18 фев. 2018, в 14:55

Источник

Теги:

javascript

e2e-testing

cypress

1 ответ

Ещё вопросы

bkucera · Accepted Answer · 2018-02-18T19-08-00.000Z

Cypress имеет уникальный рабочий процесс, который основан на том, чтобы включить как можно больше тестов в его поведение по умолчанию. Прежде чем имитировать щелчок по элементу, содержащему "Семейство", он проверяет работоспособность. Это встроенный тест, который не будет выполнен, если элемент скрыт, display:none (в данном случае), размер 0,0 и т.д. Только после прохождения этого теста он будет имитировать действие над элементом, содержащим "Семейство".,

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

Правильный способ выполнить этот тест - вызвать раскрывающееся меню, чтобы элемент стал видимым, а затем выполнить щелчок. Вот что вы должны сделать, если хотите найти пункт меню "Жанр", открыть раскрывающееся меню и щелкнуть пункт "Семейство":

describe('Hover Menu',()=>{
    it('can click on a genre sub-menu item',()=>{
        cy.get('#menu').contains('Genre').next('.sub-menu').then($el=>{
            cy.wrap($el).invoke('show')
            cy.wrap($el).contains('Family').click()
        })
    })
})

Здесь show - это метод jQuery, который изменяет свойства CSS, чтобы сделать элемент видимым.

cy.wrap($el) превращает элемент jQuery в Cypress Chainer, который затем можно вызывать с помощью команд Cypress.

Ну, это то, чего я пытался достичь. Запустите выпадающее меню и нажмите на ссылку.
@ demouser123 смотри мой обновленный ответ, это должно решить твою проблему
Спасибо за решение, которое отлично сработало для меня. Тем не менее, мне не ясно, что здесь происходит, и документы, хотя они были удивительно полезны, не разъяснили мне. Например, почему мы wrap $el , который является объектом? Документы говорят, что invoke вызывает функцию, однако, откуда идет show ? Большое спасибо за разъяснения.
Спасибо за обновление ответа для нас.