Skip to main content

​
Overview

The Navigate step takes you to a specific URL or web page. It’s the foundation of most tests - you start by navigating to the page you want to test, then interact with it using other steps.

​
When to Use Navigate

Use Navigate when you need to:
  • Start your test: Go to the initial page where your test begins
  • Move between pages: Navigate to different sections of your application
  • Test deep links: Verify that specific URLs load correctly
  • Switch contexts: Navigate to different parts of your app during multi-step workflows
  • Follow dynamic URLs: Navigate to URLs you extracted or generated earlier in your test

​
How It Works

Navigate tells the browser to load a specific URL, just like typing an address in the address bar and pressing Enter. It waits for the page to load before continuing to the next step, ensuring the page is ready for interaction. You can use static URLs, environment variables for different test environments, or variables you captured from previous steps for dynamic navigation.

​
Using the Navigate Step

When you add a Navigate step, you’ll configure:

​
Specifying the URL

You have three options for providing the URL: Static URL Enter the complete URL directly, including the protocol (http:// or https://):
  • https://example.com/login
  • https://app.example.com/dashboard
Environment Variables Use environment variables to navigate to different URLs per environment:
  • {{BASE_URL}}/login - Navigate to login on any environment
  • {{STAGING_URL}}/dashboard - Use staging-specific URLs
Variables from Previous Steps Toggle “Use variables” to select URLs you extracted or generated earlier. Perfect for following redirects or navigating to dynamically generated pages.

​
Real-World Examples

​
Starting a Test at Login

Step 1: Navigate
  URL: https://app.example.com/login

Step 2: Fill
  Locator: input[name='email']
  Text: {{TEST_USER_EMAIL}}

Step 3: Fill
  Locator: input[name='password']
  Text: {{TEST_USER_PASSWORD}}

Step 4: Click
  Locator: button[type='submit']

Step 5: Check URL
  Pattern: /dashboard
Why this works: Begin your test by navigating to the login page.

​
Environment-Specific Testing

Step 1: Navigate
  URL: {{BASE_URL}}/products

Step 2: Check Visibility
  Locator: .product-grid
  Assertion: Is visible

Step 3: Check Text
  Locator: h1
  Expected Text: Our Products
Why this works: Use environment variables to run the same test on staging, production, or local development.

​
Multi-Step Navigation Flow

Step 1: Navigate
  URL: https://example.com/

Step 2: Click
  Locator: a[href='/about']

Step 3: Check URL
  Pattern: /about

Step 4: Navigate
  URL: https://example.com/contact

Step 5: Check Visibility
  Locator: form[name='contact']
  Assertion: Is visible
Why this works: Navigate between different pages during your test workflow.

​
Following a Dynamic URL

Step 1: Navigate
  URL: https://example.com/orders

Step 2: Extract Value
  Locator: .order-link
  Variable Name: orderUrl

Step 3: Navigate
  Use variables: orderUrl

Step 4: Check Visibility
  Locator: .order-details
  Assertion: Is visible
Why this works: Extract a URL from the page and navigate to it. 
Step 1: Navigate
  URL: https://example.com/products/electronics/laptops?sort=price&filter=in-stock

Step 2: Check URL
  Pattern: sort=price&filter=in-stock

Step 3: Check Visibility
  Locator: .laptop-list
  Assertion: Is visible

Step 4: Check Text
  Locator: .filter-badge
  Expected Text: In Stock
Why this works: Verify that deep links with query parameters load correctly and maintain state.

​
Best Practices

​
Always Include the Protocol

  • Use https://example.com not example.com
  • Include http:// or https:// in all absolute URLs
  • This prevents ambiguity and ensures correct navigation

​
Use Environment Variables

Store base URLs in environment variables:
  • {{BASE_URL}} for your main application URL
  • {{API_URL}} for API endpoints
  • {{ADMIN_URL}} for admin panels
This lets you run tests across different environments without changing the test steps. Most tests begin with a Navigate step to set up the initial page state. This ensures:
  • Your test starts from a known page
  • Browser history is predictable
  • Previous test state doesn’t interfere

​
Wait After Navigation

For pages with heavy JavaScript or dynamic content:
  • Add Wait for Element after Navigate
  • Wait for key page elements to appear before interacting
  • Account for loading indicators that disappear

​
Troubleshooting

​
Page Doesn’t Load

Symptom: Navigation fails or times out Solution:
  • Verify the URL is correct and accessible
  • Check that the protocol (http:// or https://) is included
  • Ensure your test environment can reach the URL
  • Check for network or firewall issues
  • Verify DNS resolution if using domain names

​
Environment Variable Not Working

Symptom: URL shows {{VARIABLE_NAME}} literally Solution:
  • Verify the variable is defined in your environment settings
  • Check the variable name matches exactly (case-sensitive)
  • Ensure you’re using double curly braces: {{VAR}}
  • Confirm you’re running in the correct environment

​
Variable Dropdown Is Empty

Symptom: “Use variables” shows no options Solution:
  • Variables only appear if declared in previous steps
  • Use Extract Value or similar steps to create variables first
  • Check that earlier variable assignment steps ran successfully

​
Page Loads But Content Missing

Symptom: Navigation succeeds but page appears empty or incomplete Solution:
  • Add Wait for Element to wait for content to load
  • Check for JavaScript errors in the browser console
  • Verify the page works when loaded manually
  • For single-page apps, ensure client-side routing completes

​
Wrong Page Loads

Symptom: A different page than expected appears Solution:
  • Verify the URL is exactly correct
  • Check for redirects that might change the destination
  • Use Check URL after navigation to confirm
  • Look for authentication redirects (like going to login first)

​
Full Page Navigation

Navigate performs a complete page load:
  • Clears previous page state
  • Loads all resources (HTML, CSS, JS, images)
  • Triggers page initialization
  • Resets browser context

​
Single-Page App Considerations

For SPAs (React, Vue, Angular apps):
  • Initial navigation loads the app shell
  • Subsequent navigations might use client-side routing
  • Content may load asynchronously after navigation
  • Add waits for dynamic content to appear