When interacting with a <select> element, the behavior of test script execution varies between Firefox and Chrome

I've encountered an unusual problem that I need help describing and solving.
Your assistance is greatly appreciated!

The issue I'm facing involves Testcafe behaving differently when running the same test script on various browsers.
testcafe: 0.23.1
firefox: 63.0.1
chrome: 70.0.3538.102
typescript: 3.1.6

This is a snippet of the Typescript code from the executed test script:

(Code snippet with imports, fixtures, and tests)

I write my code in VisualStudio Code and execute the test in Firefox using the command: -e

testcafe firefox .\stackoverflow.ts -e

Question 1: The exact same test script runs successfully in
Firefox: passes without issues
Chrome: fails with the error message provided below:

Error message displayed after the failed Chrome test execution

To rectify this error, I had to implement the following workaround:

.click(genderSelect).click(genderSelect)

After applying this workaround, the test script now passes in Chrome as well. What could be causing this discrepancy between browser behaviors?

Question 2: Despite implementing the above-mentioned workaround involving double clicks, executing the test script in Chrome presents a new challenge:

The message indicating successful test completion while not all code lines are executed

Although the radio button I intended to click remains unpressed visually, the test still passes successfully. As a temporary solution, I resorted to repeating the click action for assurance:

.click(buildingTypeRadioInput).click(buildingTypeRadioInput)

Why does the test return a pass result even when not all code lines are executed as expected?

typescriptvisual-studio-codeautomated-testse2e-testingtestcafe

Answer №1

After investigating, I have successfully replicated the initial issue you reported. It appears that this unusual behavior is linked to the information popup feature. Your observation about maximizing the browser window causing changes in rendering seems to be the root of the problem. I suspect it may be a bug, so I have submitted a bug report on our platform. In the meantime, I suggest utilizing the workaround of maximizing the window.

In regards to your second inquiry, I noticed that the radio input markup is quite intricate (with invisible inputs and an opacity of 0). Therefore, I recommend adjusting your selector as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing TypeScript to incorrectly infer rest parameters in function implementation?

I have created a function that takes a string name and a varying number of parameters which should be inferred from a specific interface. While calling this function results in correct inference, the type is not narrowed down within the function itself. in ...

typescripttypescript-generics

What is the method for choosing an element by class name in TypeScript?

Currently, I'm working on creating a responsive menu bar that collapses on smaller screens. The challenge I'm facing is that I'm using TypeScript for this project. Is there any guidance on how to translate the following code into TypeScript? ...

typescript

Eliminate text from template literals in TypeScript types

I have successfully created a function that eliminates the 'Bar' at the end of a string when using foo. However, is there a way to achieve the same result using the type statement? (refer to the code snippet below) declare function foo<T exten ...

typescript

Prohibit the use of explicit type parameters or limit the union type parameters to enhance the safety of the types

When the getValues() function is called without explicit type parameters, the Typescript code functions correctly. However, calling it with explicit type parameters can result in errors (as seen in invocation getValues<'a' | 'b' | &a ...

typescripttypescript-generics

Managing spinners in Protractor when they are concealed by a wrapper element

While writing a test for an Angular app using Protractor, I encountered several issues with handling spinners. I managed to solve some of them, but I'm unsure how to test spinners that are hidden by a wrapper. For instance, when the parent tag has ng- ...

javascriptangularjsseleniumprotractore2e-testing

Interface with several generic types

In an attempt to create a parser that can parse data fields and convert them into a complete form for display purposes, the fields property plays a crucial role. This property will define each field in a JSON data array that the client receives from the ur ...

typescript

Next.js does not recognize Typescript Context

I encountered an unexpected custom error while trying to implement custom error notifications in my form. The custom context I set up for this functionality does not seem to be working as intended, resulting in a thrown error for its non-existence. My deve ...

typescriptnext.jsmaterial-ui

Dealing with a multi-part Response body in Angular

When working with Angular, I encountered an issue where the application was not handling multipart response bodies correctly. It seems that the HttpClient in Angular is unable to parse multipart response bodies accurately, as discussed in this GitHub issue ...

angulartypescriptresponsemultipartangular-httpclient

What is the best way to increase the size of an array and populate it with just one specific element in Types

If I want to create an array in Python, like [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], all I have to do is use [1] * 10. >>> [1] * 10 [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] Is it possible to achieve the same result in TypeScript? ...

typescript

Navigating through drop down boxes with XPath

Having recently delved into Selenium automation testing, I am struggling to locate the Xpath of two drop-down boxes within our web application. Despite examining the HTML code for both elements, I have yet to accurately pinpoint the unique identifier. Alth ...

xmlseleniumselenium-webdriverxpathautomated-tests

Generating instances using TypeScript generics

Looking to create a factory for instantiating classes with generics. After checking out the TypeScript docs, everything seems to work as expected. Here's a simplified version of how it can be done: class Person { firstName = 'John'; ...

javascriptnode.jstypescriptgenericstypescript-generics

Is it possible to retrieve the second computed type in an overloaded method using TypeScript?

Looking for a solution to receive the second calculated type in an overload method using TypeScript type V1 = 'v1'; type V2 = 'v2'; type Versions = V1 | V2; async analyze(test: 'v1', data: number): Promise<void> ...

typescripttypescript-typings

Angular - Set value on formArrayName

I'm currently working on a form that contains an array of strings. Every time I try to add a new element to the list, I encounter an issue when using setValue to set values in the array. The following error is displayed: <button (click)="addNewCom ...

angulartypescript

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

javascriptcssreactjstypescriptvue.js

What is the best way to effectively use combinedLatestWith?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/country-card/country-card.component.html I am currently working on implementing a search bar in Angular that filters the "countries$" Observable based on user input. My approach involves creatin ...

javascriptangulartypescriptrxjsobservable

Translating Python's slicing assignment syntax to JavaScript/TypeScript: A guide

Currently, I am in the process of converting a Python library into TypeScript. One specific challenge I am facing is translating this line of code from this particular repository: is_prime[start - segment_min::pk] = repeat(False, len(range(start - segment ...

javascripttypescript

Combining actions in a chain within an NgRx effect for Angular

After successfully working on an effect, I now face the challenge of chaining it with a service called in a subsequent action after updating the state in the initial action through a reducer. Here is the effect code: @Effect() uploadSpecChange$: Observab ...

javascriptangulartypescriptreduxngrx

The error "ReferenceError: window is not defined" occurs when calling client.join() due to

I am looking to create a video call application using React and Next.js with the AgoraRTC SDK. After successfully running AgoraRTC.createClient(), AgoraRTC.createStream(), and client.init(), I encountered an error when trying to execute client.join(). The ...

reactjstypescriptnext.jsagora.io

The object's type remains a mystery

While working on implementing jwt authentication in Ionic, React with TypeScript, I faced a typescript error when trying to add a check in my App.tsx file after successful implementation. The error stated: Object is of type 'unknown' Below is ...

javascriptreactjstypescriptionic-frameworkionic-react

Steps to resolve the error "The value for '--target' option should be one of the following: 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es201', 'esnext'."

I recently cloned an Angular application and encountered an error related to the "target" property in the tsconfig.json file within Visual Studio 2019. My Angular version is v16.1.4, with Typescript v5.1.6. I've attempted to resolve this issue by upda ...

angulartypescriptvisual-studio