Выполнение тестового сценария ведет себя по-разному в Firefox и Chrome при манипулировании элементом <select>

Question

У меня странная проблема, которую я постараюсь описать в следующих строках.
Заранее спасибо за вашу помощь!

Проблема в том, что в моем случае Testcafe ведет себя по-разному при запуске одного и того же тестового скрипта в разных браузерах.
testcafe: 0.23.1
Firefox: 63.0.1
хром: 70.0.3538.102
машинопись: 3.1.6

Машинописный код из выполненного тестового скрипта:

import { Selector, t } from 'testcafe';
fixture `stackru`
.page `https://www.verivox.de/internet-vergleich/internetundtelefon/?Prefix=030&speed=16000#/offer?i=eyJmaWx0ZXIiOltudWxsLDE2MDAwLDEsbnVsbCwiMDMwIiwxLDEsMSxudWxsLDEsMSxudWxsLC0xLG51bGwsbnVsbCwicHJpY2UtYXNjIiwyLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsbnVsbCw2XSwiZGlhbG9nIjpbbnVsbF0sIm9mZmVyQ3JpdGVyaWEiOlsiNjM0ODkyIiwiMTg0ODYiLG51bGwsIjI0IiwzLDIsIjUwMDAwIiwiMTAwMDAiLG51bGwsbnVsbCwxLG51bGwsbnVsbCxudWxsLCIyIiwxLG51bGwsIjAzMCIsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLDEsNixudWxsLG51bGwsbnVsbF19`;
test('1', async () => {

const acceptCookiesButton = Selector('span.gdpr-vx-consent-bar-button');
const showAvailabilityCheckButton = Selector(Selector('a').withAttribute('class', /offer-page-cta/));
const contactDataEMailTextInput = Selector('#PersonalData_ContactData_EMail');
const confirmationEmailTextInput = Selector('#PersonalData_ContactData_EMailConfirmation');
const genderSelect = Selector('select[name="PersonalData.AddressData.ConnectionAddress.Gender"]');
const genderSelectOptionGet = genderSelect.find('option');
const genderSelectOption = Selector(genderSelectOptionGet);
const firstNameTextInput = Selector('#PersonalData_AddressData_ConnectionAddress_FirstName');
const nameTextInput = Selector('#PersonalData_AddressData_ConnectionAddress_Name');
const zipTextInput = Selector('#PersonalData_AddressData_ConnectionAddress_Zip');
const cityTextInput = Selector('#PersonalData_AddressData_ConnectionAddress_City');
const buildingTypeRadioInput = Selector('#Einfamilienhaus');
const bankInformationTypeRadioInput = Selector('#PersonalData_BankData_BankInformationType_KnrBlz');
const bankCodeTextInput = Selector('#PersonalData_BankData_BankCode');

await t
    .click(acceptCookiesButton)
    .click(showAvailabilityCheckButton)
    .wait(2000)
    .typeText(contactDataEMailTextInput, '[e-mail]')
    .typeText(confirmationEmailTextInput, '[e-mail]')
    .click(genderSelect)
    .click(genderSelectOption.withText('Herr'))
    .typeText(firstNameTextInput, 'Test')
    .typeText(nameTextInput, 'Test')
    .typeText(zipTextInput, '67112')
    .click(cityTextInput)
    .expect(cityTextInput.value).eql('Mutterstadt')
    .click(buildingTypeRadioInput)
    .click(bankInformationTypeRadioInput)
    .wait(2000)
    .expect(bankCodeTextInput.exists).ok('field not displayed');

});

Я использую код VisualStudio для написания своего кода и выполняю тест в браузере Firefox с параметром -e:

testcafe firefox. \ stackru.ts -e

Вопрос 1: я выполняю точно такой же тестовый скрипт с
Firefox: все работает, тест проходит
Chrome: тест не пройден, и я получаю следующую ошибку:

1) The element that matches the specified selector is not visible.

  Browser: Chrome 70.0.3538 / Windows 10.0.0

     38 |        .click(showAvailabilityCheckButton)
     39 |        .wait(2000)
     40 |        .typeText(contactDataEMailTextInput, '[e-mail]')
     41 |        .typeText(confirmationEmailTextInput, '[e-mail]')
     42 |        .click(genderSelect)
   > 43 |        .click(genderSelectOption.withText('Herr'))
     44 |        .typeText(firstNameTextInput, 'Test')
     45 |        .typeText(nameTextInput, 'Test')
     46 |        .typeText(zipTextInput, '67112')
     47 |        .click(cityTextInput)
     48 |        .expect(cityTextInput.value).eql('Mutterstadt')

     at Object.<anonymous> (C:\gco\gco-e2e-baseline\src\playground\e2etests\stackru.ts:43:10)

Чтобы избежать этой ошибки, я делаю следующее решение:

.click (genderSelect).click (genderSelect)

и теперь запуск тестового скрипта в браузере Chrome также возвращает результат прохождения. Что не так в моем коде, и почему я сталкиваюсь с такой разницей в поведении?

Вопрос 2: Учитывая, что я использую описанный выше обходной путь (2 клика), выполнение тестового сценария в Chrome, приводит меня к следующей проблеме:

 Running tests in:
- Chrome 70.0.3538 / Windows 10.0.0
stackru
√ 1
1 passed (34s)

Тест проходит, даже если не все строки кода выполнены... потому что, глядя на окно радио, я пытаюсь щелкнуть, и браузер виден,

.click (buildingTypeRadioInput)

коробка радио явно не нажата, но все равно тест проходит?! Есть некоторые другие строки кода после этой строки, которые не выполняются как временное решение, снова я делаю это:

.click (buildingTypeRadioInput).click (buildingTypeRadioInput)

просто чтобы убедиться, что тест делает то, что я хочу, чтобы он делал. Что не так в моем коде, и почему я сталкиваюсь с этой проблемой, возвращая проход вместо сбоя?

Answer 1

Мне удалось воспроизвести первый выпуск. Я думаю, что это неожиданное поведение как-то связано с информационным всплывающим окном. Вы упомянули, что вы максимизируете окно браузера, и это помогает. Как я вижу, это приводит к изменениям в рендере, поэтому причина проблемы лежит здесь. Я думаю, что это ошибка, поэтому я создал отчет об ошибке в репозитории TestCafe. На данный момент я рекомендую использовать обходной путь с максимизацией.

Что касается второго вопроса, я обнаружил, что разметка радиовхода является сложной (входные данные невидимы, непрозрачность равна 0), поэтому я рекомендую изменить селектор следующим образом:

const buildingTypeRadioInput = Selector('label[for="Einfamilienhaus"]');