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

Question

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

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

код машинописного текста из выполненного сценария теста:

import { Selector, t } from 'testcafe';
fixture `stackoverflow`
.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, 'asd@asd.asd')
    .typeText(confirmationEmailTextInput, 'asd@asd.asd')
    .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. \ stackoverflow.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, 'asd@asd.asd')
     41 |        .typeText(confirmationEmailTextInput, 'asd@asd.asd')
     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\stackoverflow.ts:43:10)

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

.click (sexSelect) .click (sexSelect)

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

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

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

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

.click (buildingTypeRadioInput)

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

.click (buildingTypeRadioInput) .click (buildingTypeRadioInput)

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

Answer 1

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

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

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