|
| 1 | +--- |
| 2 | +id: kane-ai-javascript-execution |
| 3 | +title: KaneAI - JavaScript Execution |
| 4 | +hide_title: false |
| 5 | +sidebar_label: JavaScript Execution |
| 6 | +description: Learn how to execute your tests on Kane AI using custom javascript snippets |
| 7 | +keywords: |
| 8 | + - lambdatest automation |
| 9 | + - lambdatest kaneai |
| 10 | + - kaneai guided walkthrough |
| 11 | + - kane ai prompts |
| 12 | + - kane ai commands |
| 13 | +url: https://www.lambdatest.com/support/docs/kane-ai-javascript-execution/ |
| 14 | +site_name: LambdaTest |
| 15 | +slug: kane-ai-javascript-execution/ |
| 16 | +--- |
| 17 | + |
| 18 | +import Tabs from '@theme/Tabs'; |
| 19 | +import TabItem from '@theme/TabItem'; |
| 20 | + |
| 21 | +<script type="application/ld+json" |
| 22 | + dangerouslySetInnerHTML={{ __html: JSON.stringify({ |
| 23 | + "@context": "https://schema.org", |
| 24 | + "@type": "BreadcrumbList", |
| 25 | + "itemListElement": [{ |
| 26 | + "@type": "ListItem", |
| 27 | + "position": 1, |
| 28 | + "name": "Home", |
| 29 | + "item": "https://www.lambdatest.com" |
| 30 | + },{ |
| 31 | + "@type": "ListItem", |
| 32 | + "position": 2, |
| 33 | + "name": "Support", |
| 34 | + "item": "https://www.lambdatest.com/support/docs/" |
| 35 | + },{ |
| 36 | + "@type": "ListItem", |
| 37 | + "position": 3, |
| 38 | + "name": "KaneAI JavaScript Execution", |
| 39 | + "item": "https://www.lambdatest.com/support/docs/kane-ai-javascript-execution/" |
| 40 | + }] |
| 41 | + }) |
| 42 | + }} |
| 43 | +></script> |
| 44 | +With KaneAI’s new JavaScript Execution feature, you now have the flexibility to write or paste custom JavaScript code snippets to perform tests. This allows for more advanced and customized test scenarios alongside KaneAI’s plain English test-writing format. |
| 45 | + |
| 46 | +This can be very useful for: |
| 47 | +- **Advanced Interactions:** If you need more granular control over interactions that can’t be expressed in plain English. |
| 48 | +- **Complex Test Scenarios:** For scenarios that involve manipulating the DOM, testing specific elements, or interacting with APIs directly. |
| 49 | +- **Flexibility:** Switch between natural language and JavaScript to suit your testing needs. |
| 50 | +- **Precision:** Perform tests that require more detailed code logic. |
| 51 | +- **Seamless Execution:** Test JavaScript code directly without any setup. |
| 52 | + |
| 53 | +## How to Execute Custom JavaScript Tests |
| 54 | +### Step 1: Click on the "Write a Step" Field |
| 55 | +In KaneAI’s test editor, navigate to the "Write a Step" field where you typically write your test scenarios in plain English. |
| 56 | + |
| 57 | +### Step 2: Trigger JavaScript Mode |
| 58 | +To switch to JavaScript execution mode, type the forward slash `/` or click on the `+` icon. You will see a JavaScript Pop-up Option appear. Click on the JavaScript option to switch the input mode to custom JavaScript. |
| 59 | + |
| 60 | +### Step 3: Write or Paste Your JavaScript Code |
| 61 | +Now, you can write or paste your custom JavaScript code snippet directly into the text field. A sample JavaScript code: |
| 62 | + |
| 63 | +```javascript |
| 64 | +function simulateTyping(element, text) { |
| 65 | + element.value = ''; // Clear any existing value |
| 66 | + |
| 67 | + for (let i = 0; i < text.length; i++) { |
| 68 | + let char = text[i]; |
| 69 | + let keyDownEvent = new KeyboardEvent('keydown', {key: char}); |
| 70 | + element.dispatchEvent(keyDownEvent); |
| 71 | + element.value += char; |
| 72 | + |
| 73 | + let inputEvent = new Event('input', {bubbles: true}); |
| 74 | + element.dispatchEvent(inputEvent); |
| 75 | + let keyUpEvent = new KeyboardEvent('keyup', {key: char}); |
| 76 | + element.dispatchEvent(keyUpEvent); |
| 77 | + } |
| 78 | + |
| 79 | + let changeEvent = new Event('change', {bubbles: true}); |
| 80 | + element.dispatchEvent(changeEvent); |
| 81 | +} |
| 82 | + |
| 83 | +// Example usage |
| 84 | +let inputElement1 = document.querySelector('[aria-label="First Name"]'); |
| 85 | +let inputElement2 = document.querySelector('[aria-label="Last Name"]'); |
| 86 | +let inputElement3= document.querySelector('[aria-label="Email"]'); |
| 87 | +simulateTyping(inputElement1, 'Aman'); |
| 88 | +simulateTyping(inputElement2, 'Chopra'); |
| 89 | +simulateTyping(inputElement3, '[email protected]'); |
| 90 | + |
| 91 | +return { "First name": "Aman", "Last name": "Chopra", "email": "[email protected]"}; |
| 92 | +``` |
| 93 | + |
| 94 | +The provided code snippet simulates typing into text fields programmatically by dispatching key-related events such as keydown, input, keyup, and change. It mimics real user interaction by typing each character into the field and updating its value accordingly. The example provided fills in the first name, last name, and email fields with specific values and returns them in an object format. |
| 95 | + |
| 96 | +### Step 4: Execute the Test |
| 97 | +Once your code is ready, simply press Enter. KaneAI will run your custom JavaScript snippet in the current testing environment. |
| 98 | + |
| 99 | +#### Handling Return Values and Variable Usage |
| 100 | +If your JavaScript snippet contains return values, KaneAI will automatically save these values in a variable that can be used later in the test. The output from your JavaScript code will be captured and assigned to a variable. This variable will be available for use throughout your test execution. |
| 101 | + |
| 102 | +For example, in the code snippet provided: |
| 103 | + |
| 104 | +```javascript |
| 105 | +return { "First name": "Aman", "Last name": "Chopra", "email": "[email protected]"}; |
| 106 | +``` |
| 107 | + |
| 108 | +The returned object with the keys `First name`, `Last name`, and `email` will be stored in a variable. You can reference this variable later in your test to validate or reuse the values. |
| 109 | + |
| 110 | +> Variables created from return values can be used in subsequent test steps. To use the variable, simply refer to the specific property (e.g., First name) in your test steps for verification or further actions. |
| 111 | +
|
| 112 | +#### JavaScript Snippets in Generated Code |
| 113 | +When your test is executed, the JavaScript code snippet you provided will be added directly into the generated test code. This ensures that any custom interactions performed with JavaScript are part of the overall test logic. The inclusion of JavaScript in the generated code allows for easy tracking, debugging, and modification if needed. |
| 114 | + |
| 115 | +<video class="right-side" width="100%" controls id="vid"> |
| 116 | +<source src= {require('../assets/images/kane-ai/kane-ai-js-execution.mp4').default} type="video/mp4" /> |
| 117 | +</video> |
0 commit comments