eval: Support evaluating variables out of scope of the callback

[ebebbington]

Credit to @saragee3, as I had the initial discussion with her and we came to the conclusion below.

This issue is open to suggestions/criticism, and needs to be vetted/investigated more before work can properly start

Summary

What:

Support using variables/data defined outside the scope of the callback, to be used inside the callback, for example:

const selectors = {
  userForm: "form#user-form"
}
await Sinco.evaluatePage((args) => {
  return document.querySelector(args.selectors.userForm
}, selectors

Could use the arguments in https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#method-callFunctionOn ?

Why:

Because the environment that the command is ran is, is completely different, the chrome API has no knowledge of variables out of scope, as far is it's concerned, (using first example above), selectors is an undefined variable

Acceptance Criteria

Below is a list of tasks that must be completed before this issue can be closed.

• Write documentation
• Write unit tests
• Write integration tests
• {add more checkboxes required by this issue as needed}

Example Pseudo Code (for implementation)

type Callback = (args: Record<string, unknown) => any
type EvaluatePage = ( (args: , ...args: unknown[]) => any

function evaluatePage (cb: Callback, args: unknown[]): any {
}

evaluatePage((args) => {
  return document.querySelector(args.selectors.user
}, selectors

[saragee3]

quick note but otherwise looks good 😄 User should be able to access args with dot notation so lets make it a object and not array.

is this how you kids do TS typings? 😜

interface SomeStuffArgs { [key: string]: string; }

function evaluatePage (cb: Callback, args: SomeStuffArgs): any {
    // some more code stuff
}

evaluatePage((args) => {
  return document.querySelector(args.selectors.edOrEddOrEddy);
}, { selectors });

[ebebbington]

Note that we can do

const cmd = `console.log(${name})`
await Sinco.evaluatePage(cmd)

It's just this data becomes out of scope when using the callback

[ebebbington]

we actually should be able to do this with using an fn passed to evalatePage - the callMethodOn accepts args: https://chromedevtools.github.io/devtools-protocol/tot/Runtime/#method-callFunctionOn

Like how puppeteer does it: await page.evaliate(() => { return document.querySelector(selector) }, selector)|evalauate(pageFn: Function, ...args: string[]

Im guessing they'll then use the args for the callFunctionOn method. So we should be able to do something like

const selector = "#name"
await sincol.evaluatePage(() => {
  return docu.selector(selector)
}, selector)

And inside our own evaluatePage fn, we:

const { result = await this.sendWebSocketMessage)"Runtime.callFunctionOn", {
  ...,
+args: args
})