Block reference / Web interaction

Create element

Insert your own HTML, CSS and JavaScript into the page, next to or inside an element.

Only inWarpX Browser

Create element adds markup to the page the workflow is on: a banner, a button, a style that hides a pop-up, or a script that sets something up. You choose a target element and where the new markup goes relative to it. It is for changing the page; to compute something and hand the result back to the workflow, use JavaScript code.

The Create element block's settings, filled in as in the example below.

Settings

Element Selector

The element to act on, as a CSS selector or an XPath; anything starting with /, (, @ or id( is read as XPath, and it can hold a reference such as {{variables.selector}}. The crosshair button (Select an element) lets you pick the element in the profile's browser, including inside iframes and shadow roots, and the check button (Verify selector) tests what you typed. The default is body.

Examplebody
Wait for selector

Keeps looking for the element until it appears or Selector timeout (ms) runs out. Off, the element must already be on the page when the block runs, or the block fails.

ExampleUnchecked
Selector timeout (ms)when Wait for selector is on

How long Wait for selector keeps looking, in milliseconds. The default is 5000.

Example5000
Insert element

Where the HTML goes relative to the target: As first child, As last child (the default), As previous sibling, As next sibling, or Replace target element, which removes the target and puts your HTML in its place.

ExampleAs first child
Run before page loaded

Runs the block without first waiting for the page to finish loading. Leave it off unless the target element is already there early and you need to act before the rest of the page loads.

ExampleUnchecked
Delay time (ms)

A pause after the block finishes, before the next block starts. Write one number such as 1000, or a range such as 1000,3000 to pick a random pause in that range on each run.

Example500
HTML

In the Edit element window. The markup to insert; it can hold references such as {{variables.runDate}}, which are filled in before it is inserted.

Example<div id="run-label" style="padding:8px;background:#fde68a">Checked on {{variables.runDate}}</div>
CSS

In the Edit element window. Added to the page as a style element, so it applies to the whole page, not only to your HTML.

Example#cookie-banner { display: none !important; }
JavaScript

In the Edit element window. Runs in the page after the HTML is inserted; refData(keyword, path) reads workflow data, for example refData('variables', 'runDate').

Exampledocument.getElementById('run-label').title = refData('variables', 'runDate');
Preload script

In the Edit element window. Files fetched from an http or https address and added before your JavaScript runs; choose Style for a stylesheet or Script for JavaScript. An address that fails to load is skipped.

ExampleStyle | https://cdn.example.com/banner.css

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

What it hands on

Nothing is written to the table or to variables. The block leaves by its single output once the markup is in place; if the target element is not found, it fails.

Example: Stamp the page with the run date before a screenshot

  1. Start
  2. New tab
  3. JavaScript code
  4. Create element
  5. Take screenshot
Where Create element sits in the example workflow.
  1. Before this block, set a variable runDate, for example with a JavaScript code block that calls setVariable('runDate', new Date().toISOString().slice(0, 10)).
  2. Add a Create element block. Leave Element Selector as body and set Insert element to As first child.
  3. Click Edit element. On the HTML tab, enter <div id="run-label" style="padding:8px;background:#fde68a">Checked on {{variables.runDate}}</div>.
  4. On the CSS tab, enter #cookie-banner { display: none !important; } so the banner does not cover the page.
  5. Set Delay time (ms) to 500 so the page settles, then add a Take screenshot block in full-page or element mode.

Good to know

  • If no element matches, the block fails with an element-not-found error and the workflow stops. To carry on instead, set On error in the block's settings to Continue flow or Execute fallback.
  • setVariable can be typed in this block's JavaScript, but it only changes a copy inside the page; later blocks do not see it. To hand values back to the workflow, use JavaScript code.
  • Everything you insert lives in the page only. It disappears when the page reloads or the workflow navigates away.

See also

  • JavaScript code — Run your own JavaScript in the page, and pass data back to the workflow.
  • Take screenshot — Captures the visible page, the whole page or one element as an image, and saves it as a file, in the table or in a variable.
  • Element exists — Check whether an element is on the page and continue by one of two outputs.