typescript - testskriptets körning beter sig olika i Firefox och Chrome när man manipulerar ett <select>-element

Jag står inför ett konstigt problem, som jag kommer att försöka beskriva i de följande raderna.
Tack på förhand för din hjälp!

Problemet är att i mitt fall beter sig Testcafe olika när samma testskript körs på olika webbläsare.
testcafe: 0.23.1
firefox: 63.0.1
chrome: 70.0.3538.102
typescript: 3.1.6

Typescript-kod från det körda testskriptet:

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, '[email ')
    .typeText(confirmationEmailTextInput, '[email ')
    .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');

});

Jag använder VisualStudio Code för att skriva min kod, och jag kör testet i Firefox-webbläsaren, med alternativet -e:

testcafe firefox .\stackoverflow.ts -e

Fråga 1: Jag kör exakt samma testskript med
Firefox: allt fungerar, testet klarar sig
Chrome: testet misslyckas och jag får följande fel:

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, '[email ')
     41 |        .typeText(confirmationEmailTextInput, '[email ')
     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)

För att undvika detta fel gör jag följande workaround:

.click(genderSelect).click(genderSelect)

och nu, när jag kör testskriptet på Chrome-webbläsaren returneras också ett godkänt resultat. Vad är fel i min kod, och varför stöter jag på denna skillnad i beteende?

Fråga 2: Med tanke på att jag använder ovanstående lösning (de 2 klicken), att köra testscripts under Chrome leder mig till nästa problem:

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

Testet passerar, även om inte alla kodrader körs..., eftersom när jag tittar på radioknappen jag försöker klicka på och har webbläsaren synlig,

.klicka(buildingTypeRadioInput)

radioknappen är tydligt inte markerad, men testet går ändå igenom?! Det finns några andra kodrader efter denna rad som inte körs. Som en tillfällig lösning gör jag detta igen:

.click(buildingTypeRadioInput).click(buildingTypeRadioInput)

bara för att säkerställa att testet gör vad jag vill att det ska göra. Vad är fel i min kod, och varför stöter jag på detta problem med att returnera en godkänd istället för en underkänd?

Svar #1

Jag kunde återskapa det första problemet. Jag tror att detta oväntade beteende på något sätt är kopplat till informationspopupen. Du nämnde att du maximerar webbläsarfönstret och att det hjälper. Som jag ser det leder detta till förändringar i renderingen, så orsaken till problemet ligger här. Jag tror att det är ett fel, så jag har skapat en felrapport i TestCafe-repositoriet. För tillfället rekommenderar jag att använda lösningen med att maximera.

När det gäller den andra frågan har jag upptäckt att markeringen av radioingångar är komplex (ingångarna är osynliga, opaciteten är 0), så jag rekommenderar att du ändrar din selektor på följande sätt:

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