Failed to feed selector to a ClientFunction

Question

Please take a look at the structure below.
Is there any way to get 'Example 1' working? The idea is to avoid storing a 'css selector string' in a 'test' class.

MyAccount.js



    import { Selector} from "testcafe";

    export class MyAccount {
      constructor() { 
        this.box = {
          item_1: Selector("#item01");
          item_2: Selector("#item02");
        }
      }
    }

clientFunctions.js



    import { ClientFunction } from 'testcafe';

    export const scrollInto = ClientFunction((selector) => {
        var element = window.document.querySelector(selector);    
        element.scrollIntoView();
    });

EXAMPLE 1. (FAILED)



    import { MyAccount } from "../MyAccount";
    import { scrollInto } from "../clientFunctions";

    const myAccount = new MyAccount();

    fixture("Feature A").page(process.env.url);

    test("Test 01", async t => {

      await scrollInto(myAccount.box.item_1);

    });

EXAMPLE 2. (PASSED)



    import { MyAccount } from "../MyAccount";
    import { scrollInto } from "../clientFunctions";

    const myAccount = new MyAccount();

    fixture("Feature A").page(process.env.url);

    test("Test 01", async t => {

      await scrollInto("#item01");

    });

score 2 · Accepted Answer · answered Apr 23 '20 at 13:58

2

The problem is that the browser's querySelector method doesn't work with the TestCafe Selector API. Please change the MyAccount class in the following way to make your example work:

export class MyAccount {
    constructor() { 
        this.box = {
            item_1: "#item01",
            item_2: "#item02"
        }
    }
}

answered Apr 23 '20 at 13:58

aleks-pro

1,659
4
12

yes, I can use such approach as a solution, but in this case I will not be able to refer to page elements within a test like this //await t.click(myAcoount.box.item_1)//, instead of this I will have to use //await t.click(Selector(myAccount.box.item_1))//. But, in any case, it looks like there is not any better option. Thank you for your answer. – k pobozhny Apr 24 '20 at 11:29

score 0 · Answer 2 · answered Aug 21 '20 at 15:35

0

You can pass a Selector into a ClientFunction through the dependencies option and override it later by calling with method.

answered Aug 21 '20 at 15:35

Arseniy Rubtsov

880
4
10

Failed to feed selector to a ClientFunction

2 Answers2