Exploring TestCafe and Testing Library: How to destructure multiple selectors with one selector

Currently facing a challenge with writing a test using testcafe and testing library.

Given the site's unique characteristics, we are unable to utilize the standard testing library role with name/label queries as our tests run across 50+ different locales without needing translations during the tests.

To address this limitation, I retrieve my form container and then extract the two input fields using TL's within and query functions.

The issue arises when trying to destructure the returned 2 input fields for individual use, resulting in the following error:

Error: Type 'Selector' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

My Selectors are structured as follows:

// Container holding the form
export const ComponentContainer = Selector("[data-testid=ComponentContainer]");

// Retrieves 2 input fields for username/password
export const InputFields = within(ComponentContainer).queryAllByRole("textbox");

// Attempting to destructure these inputs and export them as named Selectors
export const [UsernameField, PasswordField] = LoginPageContainer


Seeking guidance on understanding this error and finding a solution - Any assistance would be appreciated!

Thank you

Answer №1

At this time, there is no way to destructure the Selector type as an array. To access a specific element, you can utilize the Selector.nth method like so:

export const inputFields = Selector('.InputFields');
export const loginField = inputFields.nth(0);
export const passwordField = inputFields.nth(1);

If you have any more questions, feel free to ask.

Best regards, Artem

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

Combining two arrays of objects using JavaScript

I am working with two arrays of objects that look like this: objects [ { countMedias: 2 }, { countMedias: 1 }, { countMedias: 3 }, { countMedias: 1 }, { countMedias: 2 } ] listePlayliste [ { nom_playlist: 'bbbb' }, { nom_playlist: &apo ...

Can [email protected] be used to test *.ts files?

I have a question but unfortunately, I cannot seem to find any information about it. My node version is stuck on 4.2.2, which means I am unable to use ts-jest as it requires at least <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...

Searching with PHP AJAX and an external JSON file

Is there a way to create an input field that displays results from an external JSON file without needing a refresh? Currently, my code works well for checking results directly in the PHP file. However, how can I modify it to check for results in an externa ...

"Exploring the power of Selenium with Chromedriver integration in a

Attempting to run integration tests using javascript for my application (Chrome being the browser of choice), I encountered an issue where Capybara failed to detect the Selenium driver. The testing environment consists of: Linux (Ubuntu 12.10) RoR 3.1 Rsp ...

Merging two arrays concurrently in Angular 7

When attempting to merge two arrays side by side, I followed the procedure below but encountered the following error: Cannot set Property "account" of undefined. This is the code in question: acs = [ { "account": "Cash In Hand", ...

Is there a Ruby gem similar to Readability that anyone can recommend?

Readability is a nifty JavaScript tool that magically transforms a cluttered HTML page into a more user-friendly format. I'm on the hunt for a Ruby implementation or something along those lines - does anyone know of a library that offers similar funct ...

When looking for a selection, the drop-down list unexpectedly shifts upwards

When using the ngx-intl-tel-input library in my Angular application, I noticed that when searching for a country in the dropdown list, it moves to the top. I am looking to fix the position of the dropdown menu while searching. Check out the demo: Demo Lin ...

Using PHP's $_GET with an Ajax/Jquery Request

I've been struggling to set a variable $id=$_GET["categoryID"] and can't seem to make it work. I suspect it's related to the Ajax request, but I'm unsure how to format it correctly to work with the request for my mysql query. Any assist ...

Using JavaScript to assess the outcome of a form utilizing an if statement

Trying out a method to assess a result by utilizing an if statement on the form provided below. Upon dividing the 2nd result by the 1st result, an average percentage is calculated. If this percentage is equal to or higher than 55, then the outcome is label ...

Error encountered: java.lang.ArrayIndexOutOfBoundsException occurred for the second time in an Android application

Every time I run my app for the second time, I encounter this error. Cleaning the project allows it to run properly, and starting a new emulator also enables my app to run, but it fails to run consecutively multiple times. null java.lang.ArrayIndexOutOf ...

Wave of the figure in three.js

I have sculpted a humanoid figure and now I am attempting to animate the figure waving with its left hand when the waveButton is clicked. I established a hierarchy where the body element is the parent, with leftArm, rightArm, leftLeg, rightLeg, and head as ...

Concealing the clicked HTML element once the AJAX request is successful

Just starting out in Web Development and creating a mock twitter application. I'm looking to eliminate the tweet box once the delete button is clicked (only if it's actually deleted on the backend) Utilizing django templating to iterate through ...

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

Is my solution handling exceptions properly in corner cases?

Given an array in which I need to print the first index of a repeating element using recursion and binary search. However, there is a corner case where if the element is at index 0, it throws an "ArrayIsOutOfBound" exception. This issue occurs in every sol ...

What is the method for accessing a local CSV file using client-side Javascript?

I need to use client-side JavaScript to read data from a local csv file. The HTML code imports a JavaScript file located in a different folder using a script tag. Here's the content of the JavaScript file: $.ajax({ type: "GET", url: "./../.. ...

add the AJAX response to the specified div element

I'm currently using an ajax call to retrieve movie data from the IMDb API for 'The Shawshank Redemption'. My goal is to display this data within the designated div element. <div id="movie-data"></div> Here's my current Jav ...

The function `getMovie` is not a valid function in the `dataService` causing a

When attempting to utilize a service for retrieving a JSON object, I encountered an error while using the service method: ERROR TypeError: this.dataService.getMovie is not a function Here is my code snippet: DataService: @Injectable({ providedIn: &ap ...

Selecting input elements using jQuery with the li option

In my HTML, I have a list of input textboxes with the class "txtdate" and another list of input textboxes with the class "txthrs". Here is an example of how they are structured: <div id="dvlitr"> <li id="0"> <label class="txtdatewrapper"> ...

How to create a see-through background using three.js

I am new to working with three.js and recently came across a codepen that caught my attention. However, I am facing difficulties while trying to change the background color. After exploring various questions related to this issue, I attempted to add { alp ...

Ways to incorporate suspense with NextJS 14 - how can I do it?

I am looking to add a suspense effect to the initial loading of my page while the assets are being fetched. These assets include images on the home screen or as children of the RootLayout component. How can I implement an initial Loading state for these ...