SmartestQADocs
javascript IN-BROWSER

JavaScript Step

Execute JavaScript code in the browser context. A powerful tool for LocalStorage, DOM manipulation, dynamic elements and more.

What is JavaScript Step?

JavaScript Step allows you to run custom JS code inside the browser during your test. Your code can access the page's DOM, localStorage, and all browser APIs.

Python vs JavaScript Step

Python: Runs on the Agent, controls the browser via Selenium, can access external APIs.
JavaScript: Runs inside the browser, directly accesses the DOM, can reach page variables.

When to Use?

Do Use

  • * LocalStorage / SessionStorage operations
  • * Extracting data from DOM (hidden fields, attributes)
  • * Accessing page variables (window objects)
  • * UI operations like scroll, focus, blur
  • * Complex widgets like date pickers, sliders
  • * AJAX completion checks

Don't Use

  • * Simple click/type operations (use Action)
  • * External API calls (use API Step)
  • * File operations (use Python)
  • * Database queries (use Database Step)
  • * Complex calculations (use Python)

Real Scenario Examples

Scenario 1: E-commerce Cart Data Verification

Reading and validating cart information from LocalStorage

Use Case: User added products to cart. Cart data is stored in localStorage. You want to verify the number of items in the cart during testing. 

// Get cart data from localStorage
const cartData = localStorage.getItem('cart');
const cart = JSON.parse(cartData);

// Return the number of items in cart
return cart.items.length;

You can check the returned value with Assertion: {{js_result}} == 3

Scenario 2: Passing Auth Token to Another Test

Capturing JWT token after login

Use Case: You want to use the JWT token obtained after login test in API tests. The token is stored in localStorage. 

// Get and return JWT token
const token = localStorage.getItem('authToken');
return token;

Save the returned value to Global Parameter: auth_token = {{js_result}}

Scenario 3: Reading Hidden Input Value

Getting CSRF token from a form

Use Case: You want to validate the CSRF token value before form submit or use it in an API request. 

// Get CSRF token from hidden input
const csrfToken = document.querySelector('input[name="_csrf"]').value;
return csrfToken;

Scenario 4: Making Lazy Load Element Visible

Scrolling to element on infinite scroll page

Use Case: The page uses lazy loading. You need to scroll to reach the "Load More" button. 

// Scroll to element
const element = document.querySelector('#load-more-btn');
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
return true;

Scenario 5: Setting Date in Date Picker

Programmatic control of React/Vue date picker

Use Case: Date pickers in modern JS frameworks are difficult to control with clicks. You want to set the value directly. 

// Set input value and trigger change event
const dateInput = document.querySelector('#departure-date');
dateInput.value = '2025-02-15';

// Trigger change event for React/Vue
const event = new Event('input', { bubbles: true });
dateInput.dispatchEvent(event);
return true;

Scenario 6: AJAX Request Completion Check

Waiting until spinner disappears

Use Case: You clicked a button, AJAX started. You don't want to proceed while the loading spinner is visible. 

// Check if loading spinner is visible
const spinner = document.querySelector('.loading-spinner');
const isLoading = spinner && spinner.offsetParent !== null;
return !isLoading; // true = loading complete

Scenario 7: Reference Code Copy Test

Verifying that the "Copy" button works

Use Case: There's a "Copy reference code" button. You want to test that it actually copies to the clipboard. 

// Read from clipboard (async)
const clipboardText = await navigator.clipboard.readText();
return clipboardText;

Note: Clipboard API requires HTTPS and may request user permission.

Scenario 8: Accessing Element Inside Shadow DOM

Controlling elements within Web Components

Use Case: Modern web components use Shadow DOM. Selenium/normal selectors cannot find these elements. 

// Enter Shadow DOM and find element
const host = document.querySelector('my-custom-component');
const shadowRoot = host.shadowRoot;
const button = shadowRoot.querySelector('.inner-button');
button.click();
return true;

Syntax & Return

Return Value

The value returned from JavaScript Step is stored in the {{js_result}} variable and can be used in subsequent steps.

Primitive Values
return "hello";     // string
return 42;          // number
return true;        // boolean
Object/Array
return { name: "John", age: 25 };
return ["a", "b", "c"];
// Serialized as JSON
Saving to Global Parameter

To save the value returned from JavaScript Step as a Global Parameter, use the "Save to Global Parameter" option in the step settings.

Frequently Asked Questions

What is the difference between JavaScript Step and Python Step?

JavaScript Step runs inside the browser and directly accesses the DOM. Python Step runs on the SmartestQA Agent and controls the browser via Selenium WebDriver. Use JS for reading localStorage, Python for file operations.

Can I use async/await?

Yes! You can use async/await in JavaScript Step. Use await for async operations like Clipboard API, fetch.

Can I see console.log outputs?

Yes, the console outputs of JavaScript Step are displayed in the "Console Output" section of the test report. You can use console.log() for debugging.

What happens in case of an error?

If an error is thrown in JavaScript, the step will FAIL and the error message will be written to the report. You can catch errors with try-catch.

Python Script API Request

Covers: Python & JavaScript