Unable to Pass function as a parameter for Selector $

[yskoverride]

The documentation on taiko suggests that we can pass a function as parameter for the selector $.

$(() => {return document.querySelector('#foo');})

But when i am trying to use this as a selector for writing text into a field with below command

write("Test",into($(() => {return document.querySelector('#txtActionItemTitle');})))

I get the below error

Error: Query function should return a DOM Node or DOM NodeList, run .trace for more info.

I tried executing the function

write("Test", into( $((function(){ return document.querySelector('#txtActionItemTitle');})())))

I get error "Uncaught document is not defined"

I confirmed that the element is available with command write("Test", into( $(#txtActionItemTitle')))

I am not sure why its not working when i am passing a function. Please help me out.

[zabil]

Please try changing your syntax to

await write("Test", into( $(() => document.querySelector('#txtActionItemTitle'))));

[yskoverride]

Hey @zabil

I tried with multiple sites, but its failing every time i use function as a parameter.

Please see the outcome of test written for google.com

const { openBrowser, goto, click, $, into, write, closeBrowser } = require('taiko');
(async () => {
    try {
        await openBrowser();
        await goto("https://google.com");
        await write("Hello", into($(() => document.querySelector('.gLFyf gsfi') )));
        await click($(() => document.querySelector('.gNO89b')));
    } catch (error) {
        console.error(error);
    } finally {
        await closeBrowser();
    }
})();

But I get this error message

✔ Browser opened
✔ Navigated to URL https://google.com
Error: Query function should return a DOM Node or DOM NodeList
   at getObjectIdsFromResult (/home/metal/droid/js/tai/node_modules/taiko/lib/handlers/runtimeHandler.js:44:13)
   at Object.findElements (/home/metal/droid/js/tai/node_modules/taiko/lib/handlers/runtimeHandler.js:156:34)
   at async DollarWrapper._get (/home/metal/droid/js/tai/node_modules/taiko/lib/elementWrapper/dollarWrapper.js:36:11)
   at async /home/metal/droid/js/tai/node_modules/taiko/lib/elementSearch.js:310:22
   at async waitUntil (/home/metal/droid/js/tai/node_modules/taiko/lib/helper.js:126:11)
   at async /home/metal/droid/js/tai/node_modules/taiko/lib/elementSearch.js:308:7
   at async DollarWrapper.elements (/home/metal/droid/js/tai/node_modules/taiko/lib/elementWrapper/elementWrapper.js:166:12)
   at async findElements (/home/metal/droid/js/tai/node_modules/taiko/lib/elementSearch.js:246:20)
   at async waitAndGetActionableElement (/home/metal/droid/js/tai/node_modules/taiko/lib/actions/pageActionChecks.js:149:43)
   at async write (/home/metal/droid/js/tai/node_modules/taiko/lib/actions/write.js:56:11)

Could you please help me out.

[zabil]

There's a problem with the selector snippet you provided for example

await write("Hello", into($(() => document.querySelector('.gLFyf gsfi') )));

is not the right way of selecting multiple classes it is

await write("Hello", into($(() => document.querySelector('.gLFyf.gsfi') ))); // this works

It might be worth testing these selectors to use the right expression on the browser before using them on taiko.