typescript - 操作 <select> 元素时，测试脚本执行在 Firefox 和 Chrome 中的行为有所不同

Question

我面临一个奇怪的问题，我将尝试在接下来的行中描述该问题。
预先感谢您的帮助!

问题是，就我而言，Testcafe 在不同浏览器上运行相同的测试脚本时表现不同。
testcafe:0.23.1
火狐:63.0.1
chrome:70.0.3538.102
typescript :3.1.6

执行的测试脚本中的 typescript 代码:

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, '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2938196b2938196dc938196" rel="noreferrer noopener nofollow">[email protected]</a>')
    .typeText(confirmationEmailTextInput, '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b6a4b397b6a4b3f9b6a4b3" rel="noreferrer noopener nofollow">[email protected]</a>')
    .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 Code 编写代码，并在 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, '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecfddcaeecfddca80cfddca" rel="noreferrer noopener nofollow">[email protected]</a>')
     41 |        .typeText(confirmationEmailTextInput, '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375644537756445319564453" rel="noreferrer noopener nofollow">[email protected]</a>')
     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(genderSelect).click(genderSelect)

现在，在 Chrome 浏览器上运行测试脚本也返回通过结果。 我的代码出了什么问题，为什么会遇到这种行为差异？

问题 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

我能够重现第一个问题。我认为这种意外行为在某种程度上与弹出信息有关。您提到您正在最大化浏览器窗口，这会有所帮助。据我所知，这会导致渲染发生变化，因此问题的原因就在这里。我认为这是一个错误，所以我创建了一个 bug report在 TestCafe 存储库中。目前，我建议使用最大化的解决方法。

关于第二个问题，我发现 radio 输入的标记很复杂(输入不可见，不透明度等于0)，因此我建议您按以下方式修改选择器:

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