测试脚本执行在 Firefox 和 Chrome 中操作 <select> 元素时表现不同

Question

我遇到了一个奇怪的问题，我将在接下来的几行中尝试描述。
预先感谢您的帮助！

问题是，在我的例子中，Testcafe 在运行不同浏览器上的相同测试脚本时表现不同。
测试咖啡馆: 0.23.1
火狐: 63.0.1
chrome: 70.0.3538.102
打字稿：3.1.6

来自已执行测试脚本的 Typescript 代码：

import { Selector, t } from 'testcafe';
fixture `Whosebug`
.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 Code 编写我的代码，我正在 Firefox 浏览器中执行测试，选项为 -e：

testcafe firefox .\Whosebug.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\Whosebug.ts:43:10)

为了避免这个错误，我正在做下一个解决方法：

.click(genderSelect).click(genderSelect)

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

问题二： 考虑到我正在使用上述解决方法（两次点击），在 Chrome 下执行测试脚本，让我遇到下一个问题：

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

测试通过，即使不是所有的代码行都被执行...，因为看着单选框我试图点击并让浏览器可见，

.click(buildingTypeRadioInput)

单选框明明没有被点击，居然还测试通过？！此行之后还有一些其他代码行未执行作为临时解决方案，我再次这样做：

.click(buildingTypeRadioInput).click(buildingTypeRadioInput)

只是为了确保测试完成我想让他做的事情。我的代码有什么问题，为什么我会遇到这个问题，返回通过而不是失败？

Answer 1

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

关于第二个问题，我发现单选输入的标记很复杂（输入是不可见的，不透明度等于 0），所以我建议您按以下方式修改您的选择器：

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

测试脚本执行在 Firefox 和 Chrome 中操作 <select> 元素时表现不同

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

automated-tests

typescript

e2e-testing

visual-studio-code

testcafe