Block reference / Web interaction

JavaScript code

Run your own JavaScript in the page, and pass data back to the workflow.

Only inWarpX Browser

JavaScript code runs a script inside the page the workflow is on, or outside any page, when the other blocks cannot do what you need: calculating a value, reading many things at once, or calling the page's own functions. The script reads workflow data with refData, sets variables with setVariable, and hands results to the next block with nextBlock. The code runs inside an async function, so you can use await directly.

The JavaScript code block's settings, filled in as in the example below.

Settings

Timeout (milliseconds)when Execute in every new tab is off

How long the code may run before the block fails with a timeout. Code that legitimately runs longer can call resetTimeout() to start the count again. The default is 20000.

Example20000
Execution contextwhen Execute in every new tab is off

Active tab runs the code in the page, with its document and everything the page has loaded. Background runs it outside any page, so there is no document; use it for pure calculations on workflow data.

ExampleActive tab
JavaScript code

Click the preview to edit. Available: refData(keyword, path) reads variables, table, loopData or globalData; setVariable(name, value); nextBlock(data, insert); resetTimeout(). Each also exists with an automa prefix, such as automaNextBlock. fetchData(type, resource), also automaFetch, requests an address and resolves with the response, for example await fetchData('json', { url: '/api/cart' }).

Example
const prices = [...document.querySelectorAll('.cart-item .price')]
  .map((el) => parseFloat(el.innerText.replace(/[^0-9.]/g, '')));
const total = prices.reduce((sum, p) => sum + p, 0);
setVariable('cartTotal', total);
nextBlock({ total, items: prices.length });
Preload script

In the code window's Preload script tab. Scripts fetched from an http or https address and added to the page before your code runs; tick Remove after block execution to take them out again once the block finishes.

Examplehttps://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js | on
Execute in every new tabwhen Execution context is Active tab

Runs the code now, and again in every tab a later New tab block opens. In this mode the code cannot hand anything back: nextBlock and setVariable are not available, and the block moves on at once.

ExampleUnchecked
Run before page loadedwhen Execution context is Active tab

Runs the code without waiting for the page to finish loading, as soon as the page has a document to run in. Use it when the code should not wait for slow images or scripts. Parts of the page may not exist yet when the code runs, so check for an element before you use it.

ExampleUnchecked

Every block also has the shared block settings — a description, Disable block and what to do on an error. Fields that take text accept data from earlier blocks.

What it hands on

Whatever you pass to nextBlock(data): an object whose keys are table column names adds one row, and a list of such objects adds several. nextBlock(data, false) passes the data on without writing it to the table. Variables set with setVariable are readable afterwards as {{variables.name}}. The return value of your code is ignored. The block leaves by its single output; a thrown error, a syntax error or a timeout makes it fail with that message.

Example: Add up a cart and branch on the total

  1. Start
  2. New tab
  3. JavaScript code
  4. Conditions
Where JavaScript code sits in the example workflow.
  1. Add a New tab block that opens the cart page, for example https://shop.example.com/cart.
  2. Add a JavaScript code block and leave Execution context on Active tab.
  3. Click the code preview and enter code that reads every .cart-item .price, adds them up, calls setVariable('cartTotal', total) and ends with nextBlock({ total, items: prices.length }).
  4. Make sure the workflow's table has total and items columns, so the row lands in them.
  5. Add a Conditions block that checks whether {{variables.cartTotal}} is greater than 100 and route each path onward.

Good to know

  • Call nextBlock exactly once, as the last thing the code does. If the code never calls it, one is added at the end with no data.
  • An error the code throws, before or after an await, fails the block with its message. Set On error in the block's settings to Continue flow if the workflow should carry on.
  • refData only sees the kinds of data your code names, for example refData('variables', 'email'). Build the keyword from a string literal, not from another variable.
  • In tabs opened later by Execute in every new tab, the code runs on its own, without refData or the other functions.
  • With Execution context on Active tab, fetchData is sent by the page itself, through the profile's proxy and with its cookies. The page's cross-origin rules apply: the page's own site and addresses that allow cross-origin requests answer, and any other address makes it throw an error.
  • fetchData takes json, text or base64 as its type; base64 gives the body as a data: URL. The resource is the address plus the usual request options, for example { url: 'https://shop.example.com/api/cart', method: 'POST', body: JSON.stringify({ id: 42 }) }. An error status (400 or above) throws too, and fails the block unless your code catches it.

See also

  • Create element — Insert your own HTML, CSS and JavaScript into the page, next to or inside an element.
  • Conditions — Send the run down one of several paths, depending on values, page elements or code.
  • Insert data — Set variables and add values to the workflow's table, several at once.