UI-licious Documentation

Appearance

Setting Global HTTP Request Headers ​

UI-licious allows you to set global HTTP request headers for your tests. These headers are applied at the proxy level and affect all outgoing HTTP and HTTPS requests from the browser session, including:

  • Page navigations (I.goTo())
  • Sub-resources (stylesheets, JavaScript files, images, fonts)
  • Asynchronous API calls (fetch() and XMLHttpRequest)
  • Embedded <iframe> document requests

Global Headers vs UI.httpRequest()

  • Global Request Headers: Applied at the proxy level to every outgoing network request made by the browser.
  • UI.httpRequest(): Sends an isolated, one-off HTTP request from JavaScript without modifying subsequent browser network traffic.

Common Use Cases ​

Global request headers are typically used for:

  • Authentication: Passing authorization tokens (such as Authorization: Bearer <token>) or API keys to access protected web applications and backend services.
  • Bot Detection Bypass: Bypassing storefront bot mitigation and challenge pages during automated testing (for example, using Shopify Web Bot Auth).

Setting Request Headers ​

There are two ways to set global HTTP request headers:

1. In a Test Script (TEST.setRequestHeader / TEST.setRequestHeaders) ​

Use test commands when you need to set or update headers dynamically within a specific test script.

To set a single header:

js
TEST.setRequestHeader("Authorization", "Bearer my-token-123")

To set multiple headers at once:

js
TEST.setRequestHeaders({
  "Authorization": "Bearer my-token-123",
  "X-Shopify-Access-Token": "shpat_abc123"
})

Once set, these headers are included in all subsequent requests made by the browser:

js
// Set authentication header, then navigate
TEST.setRequestHeader("Authorization", "Bearer my-token-123")
I.goTo("https://app.example.com/dashboard")
I.see("Welcome back")

2. In Project Configuration Files ​

If you need the same headers applied across all test scripts in your project, define them in your project configuration file (uilicious.config.yaml or uilicious.config.json). This sets the headers at the start of every test session and reduces boilerplate across test files.

In uilicious.config.yaml:

yaml
# uilicious.config.yaml
headers:
  Authorization: "Bearer my-token-123"
  X-Shopify-Access-Token: "shpat_abc123"

In uilicious.config.json:

json
{
  "headers": {
    "Authorization": "Bearer my-token-123",
    "X-Shopify-Access-Token": "shpat_abc123"
  }
}

Getting and Clearing Request Headers ​

You can inspect or remove active headers at any time during a test.

Getting Headers ​

To inspect the value of a specific header, use TEST.getRequestHeader(). It returns the header value as a string, or null if the header is not set:

js
let token = TEST.getRequestHeader("Authorization")

To retrieve all active headers as an object map, use TEST.getRequestHeaders():

js
let allHeaders = TEST.getRequestHeaders()
// Returns: { "Authorization": "Bearer my-token-123", ... }

Clearing and Deleting Headers ​

To delete a single header, use TEST.deleteRequestHeader(). Alternatively, setting the header value to null via TEST.setRequestHeader(name, null) also deletes it:

js
// Delete a specific header
TEST.deleteRequestHeader("Authorization")

To remove all custom request headers and reset the proxy to its default state, use TEST.clearRequestHeaders():

js
// Remove all custom proxy headers
TEST.clearRequestHeaders()