testscript execution behaves differently in Firefox and Chrome while manipulating a <select> element

Question

I'm facing a weird problem, which I will try to describe in the next rows.
Thank you in advance for your help!

The problem is that in my case, Testcafe behaves differently when running the same test script on different browsers.
testcafe: 0.23.1
firefox: 63.0.1
chrome: 70.0.3538.102
typescript: 3.1.6

Typescript code from the executed test script:

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

});

I am using VisualStudio Code to write my code, and I'm executing the test in Firefox browser, with the option -e:

testcafe firefox .\stackoverflow.ts -e

Question 1: I'm executing the exactly same test script with
Firefox: everything works, test passes
Chrome: test fails and I receive the below error:

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

In order to avoid this error, I'm doing the next workaround:

.click(genderSelect).click(genderSelect)

and now, running the test script on Chrome browser also returns a pass result. What is wrong in my code, and why do I encounter this difference in behavior?

Question 2: Considering I'm using the above workaround (the 2 clicks), executing the test script under Chrome, gets me to the next problem:

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

Test is passing, even tho not all the code lines are executed..., because looking at the radio box I'm trying to click and having the browser visible,

.click(buildingTypeRadioInput)

the radio box is clearly not clicked, but still the test passes?! There are some other code lines after this line that are not executed As a temporary solution, again I'm doing this:

.click(buildingTypeRadioInput).click(buildingTypeRadioInput)

just to make sure that the test does what I want him to do. What is wrong in my code, and why do I encounter this issue, with returning a pass instead of a fail?

Answer 1

I was able to reproduce the first issue. I think this unexpected behavior is somehow connected with the information popup. You mentioned that you are maximizing the browser window and it helps. As I see, this leads to changes in the render, so the cause of the issue lies here. I think it is a bug so I've created a bug report in the TestCafe repository. For now, I recommend using the workaround with the maximizing.

As for the second question, I've found that the markup of radio input is complex (inputs are invisible, opacity equals  0), so I recommend you modify your selector in the following manner:

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