Search code examples
javascriptarraystypescripttestcafetesting-library

TestCafe / Testing Library - Destructuring multiple selectors from one selector

I'm currently struggling to write a test using testcafe and testing library.

Because of the nature of the site, we can't use standard testing library role with name/label queries because our tests are ran across 50+ different locales and we don't want to request translations during our tests.

To bypass this, I get my form container, and then retrieve my two input fields using TL's within and query functions.

The tricky thing is, I'm returned 2 input fields, and I'd like to destructure them to use them individually, but I'm getting the following error:

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

My Selectors currently look something like this:

// This is the container that hold a form
export const ComponentContainer = Selector("[data-testid=ComponentContainer]");

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

// Here I would like to destructure these inputs and export them as named Selectors
export const [UsernameField, PasswordField] = LoginPageContainer

I'm not too sure what this means, or how to get around it - Any help would be great!

Thanks

Solution

  • Currently, it is not possible to destruct the Selector type as an array. You can access the desired element using the Selector.nth method as follows:

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

    Please let me know if you have additional questions.

    Regards, Artem