If you need to write a custom JavaScript snippets and need some help getting started, try the AI snippet generator. Describe what you want the snippet to do, and the AI snippet generator will write it for you. This article identifies best practices for working with the AI snippet generation in browser and mobile tests. For API test scripts, see the article on custom scripts in API tests.
Write a clear prompt
Start with a clear prompt that defines what you want the snippet to accomplish and provide examples when appropriate. To ensure your prompt yields the desired output, include samples of valid and invalid results. Consider the following sample prompt for returning a random date within the last 20 years:
“Return a random date within the last 20 years in the format MM/DD/YYYY. June 1, 2023 would be returned as 06/01/2023. A response of 06/01/2035 is invalid because it is in the future. A response of 14/35/2020 is invalid because the month and day fields are out of range.”
Generating data
“Return a random date of birth in the format MM/DD/YYYY for someone between the ages of 18 and 65.”
“Return a string starting with PO, then 2 random numbers, then 3 random letters”
Extracting data from the page
“Return the ID from the current URL that starts with mbl. For example, if the current URL is
https://www.example.com/users/12345/?id=mbl309jd3, the result should bembl309jd3”
“Count all checked checkboxes on the page. Return the number of checked checkboxes.
Interacting with the page
“Scroll to the bottom of the page, then scroll back to the top of the page.”
Guidelines for interacting with the page
The AI snippet generator can create snippets that interact with the page through the DOM (web) or Appium driver object (mobile). However, the snippet generator doesn’t have access to the HTML or page source, so it cannot see what’s on your page. To get the best results, inspect the page you want to interact with before writing your prompt:
- Web apps - open DevTools and inspect the element you want to interact with.
- Mobile apps - open the debug view and open the Inspect tab.
To help the AI generate accurate selectors, include any relevant attributes in your prompt, such as id, class or data-testid. For example, if you want to check a box on an insurance claims page:
- Too vague: “Check the box for the most recent insurance claim on the page.” The AI doesn’t know what represents an “insurance claim” in your DOM.
- Better: “Check the checkbox associated with the item in the list with the most recent date.” The AI can write a generic snippet using DOM structure.
-
Best: “Check the checkobx inside the first row of the table wit the class
claims-listthat has the most recent date.” The AI can target the exact element.
Add parameters before generating the snippet
Parameters are a great way to make the snippet easier to modify and reuse across tests. To generate parameterized snippets with AI, add the parameters before writing the prompt, and make sure the prompt references the parameters. For example:
- Add the parameter in the snippet editor. For example,
test_id. - Write a prompt that references it. For example, “Click the checkbox matching the value of
test_id.” - Generate the snippet.
The following table shows examples of how to reference parameters in a prompt:
| Parameter | Prompt |
|---|---|
| id | “Click on the checkbox that matches the value of ‘id’ and return ‘Checked!’” |
| token | “Make an API call using the token provided” |
| valueToUpperCase | “Return valueToUpperCase in all caps” |
Iterate as needed
The AI snippet generator can iterate on an existing snippet in the code editor. If the initial output from the AI snippet generator isn’t what you want, continue to provide direction in follow-up prompts. The AI can see your current snippet code, so it will refine the existing code rather than starting from scratch.
For example, if you wrote the prompt “Return today’s date”, and the AI snippet generator returned the date in MM/DD/YYYY format, you could submit a followup prompt to modify the existing snippet: “Return the date in DD/MM/YYYY format instead.”
Undo changes
Want to go back to an earlier snippet? If you didn’t save your work, click into the code editor and use the CTRL + Z/CMD + Z keyboard shortcut to undo changes.