Selenium 简明教程
Selenium IDE - JavaScript Functions
可以使用 Selenium IDE 执行 JavaScript 命令，使用 Target 字段与页面上浏览器中显示的元素进行交互。有时，Selenium Webdriver 中可用的定位符无法与页面上的元素进行交互，在这种情况下，我们可以借助 JavaScript 函数。
Selenium IDE can be used to execute JavaScript commands to interact with the elements appearing within a browser on a page using the Target field. Sometimes, the locators available in Selenium Webdriver fail to interact with the elements on a page, in those scenarios we can take the help of the JavaScript functions.
Basic Commands to run JavaScript Functions
Execute Script Command
此命令用于在当前活动的窗口或框架中执行 JavaScript。这是一个匿名函数，支持各种数据类型，如 WebElements、Long、String、Lists 和 Boolean。为了将 JavaScript 的返回值存储在变量中，使用了 return 关键字。
This command is used to execute JavaScript in a window or frame currently active. It is an anonymous function, supports various data types like WebElements, Long, String, Lists, and Boolean. In order to store the return value of the JavaScript in a variable, the return keyword is used.
Execute Async Script Command
这是一种多线程方法，用于在当前活动的窗口或框架上执行各个 JavaScript 任务。它允许页面解析继续进行，优化性能并提供极佳的灵活性。此方法使异步 JavaScript 能够以最佳方式执行。
It is a multi-threaded approach to execute individual JavaScript tasks on window or frame in currently active. It allows page parsing to continue, optimizing performance and providing great flexibility. This method enables the asynchronous JavaScript to be executed in an optimal way.
Example 1
让我们在下面的网页上使用 JavaScript 函数创建一个警报 - Tutorialspoint
Let us create an alert - Tutorialspoint on the below web page using JavaScript functions
要遵循的步骤如下所示 -
The steps to be followed are listed below −
Step 1 − 单击浏览器上在安装后显示的 Selenium IDE 扩展。
Step 1 − Click on the Selenium IDE extension visible on the browser after its installation.
Step 2 − Selenium IDE 应该与它一起启动，应该显示一个显示该工具版本的欢迎消息。在下图中，安装的版本为 3.17.2。
Step 2 − Selenium IDE should be launched along with it, a welcome message should be displayed with the version of the tool. In the below image, the version installed is 3.17.2.
除此之外，它还为我们提供了选择我们想使用该工具做什么的选项，例如在新项目中记录新测试、打开现有项目、创建新项目和关闭 Selenium IDE。
Along with this, it gives us the option to select what we would like to do with the tool, like Record a new test in a new project, Open an existing project, Create a new project, and Close Selenium IDE.
此外，还提供了带有文本 - the Selenium IDE project page 的链接，单击该链接将使我们进入 Selenium 集成开发环境文档页面。
Also, a link with the text - the Selenium IDE project page is provided, which on clicking would land us to the Selenium Integrated Development Environment documentation page.
Step 3 − 单击“创建新项目”链接，然后在 Please provide a name for your new project 下输入项目名称，比如 Test11。最后，单击确定按钮。
Step 3 − Click on the Create a new project link, then enter a project name, say, Test11 under the Please provide a name for your new project. Finally, we would click on the OK button.
Step 4 − 我们现在在 Selenium IDE 中准备好了工作区。
Step 4 − We would have the workspace ready in the Selenium IDE now.
Step 5 − 在命令字段中输入打开，在目标字段中输入 https://www.tutorialspoint.com/selenium/ ，以启动应用程序。
Step 5 − Enter open in the Command field, and https://www.tutorialspoint.com/selenium/ in the Target field, to launch the application.
Step 6 − 在命令字段中输入执行脚本，在目标字段中输入 alert("Tutorialspoint")。
Step 6 − Enter execute script in the Command field and alert("Tutorialspoint") in the Target field.
Step 7 − 在命令字段中输入关闭，以关闭浏览器窗口。
Step 7 − Enter close in the Command field to close the browser window.
Step 8 − 单击左侧窗格中显示的三个圆点，然后选择重命名选项。
Step 8 − Click on the three dots appearing at the left pane, then select the Rename option.
Step 9 − 在重命名测试用例字段下输入一个名称，比如 Test11，然后单击重命名。输入的名称会出现在 Selenium IDE 的左侧。
Step 9 − Enter a name, say Test11 under the Rename Test case field, then click on Rename. The entered name would appear on the left of Selenium IDE.
Step 10 − 从顶部单击运行所有测试，并等待测试执行完成。在我们的示例中，我们会看到运行：1，失败：0，绿色条表示测试成功运行，没有任何失败。此外，在日志下显示已成功完成的消息。
Step 10 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message that the completed successfully appeared under the Log.
在上面的示例中，我们启动了应用程序，使用 Selenium IDE 中的 JavaScript 函数和已执行脚本命令创建了一个包含文本 Tutorialspoint 的警报。
In the example above, we had launched the application, created an alert with the text Tutorialspoint using the JavaScript functions and executed script command in Selenium IDE.
除此之外，所有的测试步骤（包括测试用例名称）都变为绿色，表示所有步骤均 PASS。所有在日志选项卡下显示的步骤均显示绿色 OK。
Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green.
Example 2
让我们再举一个下面这个页面的示例，我们将在其中访问文本 - Selenium - Automation Practice ，并检索在 Name: 标签旁边的输入框中输入的值 Selenium 。
Let us take another example of the below page, where we will access the text - Selenium - Automation Practice and also retrieve the value Selenium entered in the input box beside the Name: label.
要遵循的步骤如下所示 -
The steps to be followed are listed below −
Step 1 − 按照示例 1 中所述执行步骤 1 至 5。
Step 1 − Follow Steps 1 to 5 as described in the Example 1.
Step 2 − 在“命令”字段中输入 execute script，并在“目标”字段中返回 document.getElementsByTagName('h1')[0].innerHTML，并在“值”字段中返回 value。
Step 2 − Enter execute script in the Command field and return document.getElementsByTagName('h1')[0].innerHTML in the Target field and value in the Value field.
请注意，document.getElementsByTagName('h1')[0] 是文本 Selenium - Automation Practice Form 的定位器值。
Please note, document.getElementsByTagName('h1')[0] is the locator value of the text Selenium - Automation Practice Form.
Step 3 − 在“命令”字段中输入 echo，在“目标”字段中输入 ${value}。请注意，这将把我们在第 2 步中访问的文本打印到 Selenium IDE 下的“日志”页面上。
Step 3 − Enter echo in the Command field, ${value} in the Target field. Please note, this would print the text we accessed in Step2 on the web page under the Log in Selenium IDE.
Step 4 − 在“命令”字段中输入 type，在“目标”字段中输入 id=name，并在“值”字段中输入 Selenium。请注意，id=name 是输入框的定位器值。
Step 4 − Enter type in the Command field, id=name in the Target field, and Selenium in the Value field. Please note, id=name is the locator value of the input box.
Step 5 − 在“命令”字段中输入 execute script，并在“目标”字段中返回 document.getElementById('name').value，并在“值”字段中返回 valueEntered。
Step 5 − Enter execute script in the Command field and return document.getElementById('name').value in the Target field and valueEntered in the Value field.
请注意，document.getElementById('name') 是输入框的定位器值。
Please note, document.getElementById('name') is the locator value of the input box.
Step 6 − 在“命令”字段中输入 echo，在“目标”字段中输入 ${valueEntered}。请注意，这将把我们在第 4 步中输入的文本打印到 Selenium IDE 下的“日志”页面上。
Step 6 − Enter echo in the Command field, ${valueEntered} in the Target field. Please note, this would print the text we entered in Step4 on the web page under the Log in Selenium IDE.
Step 7 − 在命令字段中输入关闭，以关闭浏览器窗口。
Step 7 − Enter close in the Command field to close the browser window.
Step 8 − 从顶部单击“运行所有测试”并等待测试执行完成。在我们的示例中，我们会看到测试运行次数：1 次，失败次数：0 次，一条绿条表示测试成功运行，没有出现任何失败。此外，完成的信息会显示在“日志”下面。
Step 8 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message that the completed successfully appeared under the Log.
在上面的示例中，我们已经启动应用程序并使用 JavaScript 命令 Selenium - Automation Practice Form 访问了文本，然后使用 JavaScript 命令 return document.getElementsByTagName('h1')[0].innerHTML 获取输入框中输入的值。
In the example above, we had launched the application and accessed the text - Selenium - Automation Practice Form using the JavaScript command - return document.getElementsByTagName('h1')[0].innerHTML. Then obtained the value entered in the input box with the JavaScript command - return document.getElementById('name').value.
除此之外，所有的测试步骤（包括测试用例名称）都变为绿色，表示所有步骤均 PASS。所有在日志选项卡下显示的步骤均显示绿色 OK。
Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green.
Example 3
让我们再举一个下面这个页面的示例，在这个页面中，我们将使用 JavaScript 函数和 run script 命令在 Selenium IDE 中禁用 Full Name: 标签旁边的输入框。在原始状态下，该输入框如下图所示。
Let us take another example of the below page, where we will disable the input box beside the Full Name: label using the JavaScript functions and run script command in Selenium IDE. In the original state, the input box looks like the below image.
禁用后，该输入框将如下图所示的高亮元素，然后，如果我们尝试向这个禁用的字段中添加一些文本，我们会遇到错误。
After disabling, the input box will look like the highlighted element in the below image, then we will encounter error if we try to add some text into that disabled field.
要遵循的步骤如下所示 -
The steps to be followed are listed below −
Step 1 − 按照示例 1 中所述执行步骤 1 至 5。
Step 1 − Follow Steps 1 to 5 as described in the Example 1.
Step 2 − 在“命令”字段中输入 run script，并在“目标”字段中输入 document.getElementsByName('fullname')[0].setAttribute('disabled', '')。
Step 2 − Enter run script in the Command field and document.getElementsByName('fullname')[0].setAttribute('disabled', '') in the Target field.
请注意，document.getElementsName('fullname')[0] 是输入框的定位器值。
Please note, document.getElementsName('fullname')[0] is the locator value of the input box.
Step 3 − 在“命令”字段中输入 type，在“目标”字段中输入 id=fullname，并在“值”字段中输入 Selenium。请注意，id=fullname 是输入框的定位器值。
Step 3 − Enter type in the Command field, id=fullname in the Target field, and Selenium in the Value field. Please note, id=fullname is the locator value of the input box.
Step 4 − 从顶部单击“运行所有测试”并等待测试执行完成。在我们的示例中，我们会看到测试运行次数：1 次，失败次数：1 次，一条红条表示测试运行失败，出现了一些错误，因为我们正尝试在禁用输入框中输入文本。此外，错误信息 Element is not currently interactable and may not be manipulated 会在“类型命令”日志下方显示。
Step 4 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 1, and a red bar denoting the test ran unsuccessfully with failures since we were trying to enter text in a disabled input box. Also, the error message - Element is not currently interactable and may not be manipulated appeared under the Log for the type command.
Example 4
让我们再举一个页面，在这个页面上，我们将首先禁用 Full Name: 标签旁边的输入框，然后使用 JavaScript 函数和 run script 命令在 Selenium IDE 中启用它。我们还会刷新网页，并在浏览器中使用 JavaScript 函数和 execute script 命令进行后退和前进操作。
Let us take another example of the same page, where we will first disable the input box beside the Full Name: label, then enable it using the JavaScript functions and run script command in Selenium IDE. We will also refresh the web page and navigate back and forward in the browser taking help of the JavaScript functions and execute script commands.
要遵循的步骤如下所示 -
The steps to be followed are listed below −
Step 1 − 按照示例 1 中所述执行步骤 1 至 5。
Step 1 − Follow Steps 1 to 5 as described in the Example 1.
Step 2 − 在“命令”字段中输入 run script，并在“目标”字段中输入 document.getElementsByName('fullname')[0].setAttribute('disabled', '')。
Step 2 − Enter run script in the Command field and document.getElementsByName('fullname')[0].setAttribute('disabled', '') in the Target field.
请注意，document.getElementsName('fullname')[0] 是输入框的定位器值。
Please note, document.getElementsName('fullname')[0] is the locator value of the input box.
Step 3 − 在“命令”字段中输入 run script，并在“目标”字段中输入 document.getElementsByName('fullname')[0].removeAttribute('disabled')。
Step 3 − Enter run script in the Command field and document.getElementsByName('fullname')[0].removeAttribute('disabled') in the Target field.
请注意，document.getElementsName('fullname')[0] 是输入框的定位器值。
Please note, document.getElementsName('fullname')[0] is the locator value of the input box.
Step 4 − 在“命令”字段中输入 type，在“目标”字段中输入 id=fullname，并在“值”字段中输入 Selenium。请注意，id=fullname 是输入框的定位器值。
Step 4 − Enter type in the Command field, id=fullname in the Target field, and Selenium in the Value field. Please note, id=fullname is the locator value of the input box.
Step 5 − 在“命令”字段中输入 execute script，并在“目标”字段中输入 history.go[0] 刷新浏览器。
Step 5 − Enter execute script in the Command field and history.go[0] in the Target field to refresh the browser.
Step 6 − 在命令字段中输入 open 并 https://www.tutorialspoint.com/selenium/practice/links.php 在目标字段中输入，启动另一个应用程序。
Step 6 − Enter open in the Command field, and https://www.tutorialspoint.com/selenium/practice/links.php in the Target field, to launch another application.
Step 7 − 在命令字段中输入 execute script，在目标字段中输入 window.history.go(-1) 以返回浏览器历史记录。
Step 7 − Enter execute script in the Command field and window.history.go(-1) in the Target field to navigate back to the browser history.
Step 8 − 在命令字段中输入 store title 并 Step 9 在值字段中输入 val。请注意，页面标题存储在变量 val 中。
Step 8 − Enter store title in the Command field, and val in the Value field. Please note, the page title is stored in the variable val.
Step 10 − 在命令字段中输入 echo 并 Step 11 在目标字段中输入 ${val}。请注意，这会在 Selenium IDE 的日志下在网页上打印我们在第 8 步中获得的页面标题。
Step 9 − Enter echo in the Command field, ${val} in the Target field. Please note, this would print the page title we obtained in Step8 on the web page under the Log in Selenium IDE.
Step 12 − 在命令字段中输入 execute script 并 Step 13 在目标字段中输入 window.history.go(1) 以向前浏览浏览器历史记录。
Step 10 − Enter execute script in the Command field and window.history.go(1) in the Target field to navigate forward to the browser history.
Step 14 − 在命令字段中输入 store title 并 document.getElementsByName('fullname')[0].setAttribute('disabled', '') 在值字段中输入 val1。请注意，页面标题存储在变量 val1 中。
Step 11 − Enter store title in the Command field, and val1 in the Value field. Please note, the page title is stored in the variable val1.
run script − 在命令字段中输入 echo 并 document.getElementsByName('fullname')[0].removeAttribute('disabled') 在目标字段中输入 ${val1}。请注意，这会在 Selenium IDE 的日志下在网页上打印我们在第 11 步中获得的页面标题。
Step 12 − Enter echo in the Command field, ${val1} in the Target field. Please note, this would print the page title we obtained in Step11 on the web page under the Log in Selenium IDE.
run script − 在命令字段中输入 close 以关闭浏览器窗口。
Step 13 − Enter close in the Command field to close the browser window.
history.go[0] − 单击顶部的运行所有测试，等待测试执行完成。在我们的示例中，我们将看到运行：1，失败：0，以及一个表示测试在没有任何失败的情况下成功运行的绿色栏。此外，日志下会显示已完成的消息。
Step 14 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message that the completed successfully appeared under the Log.
在上面的示例中，我们使用 JavaScript 函数禁用了输入框： execute script 以及 window.history.go(-1) 命令，然后使用 JavaScript 函数启用相同的输入框 - window.history.go(1) 使用 execute script 命令。我们还使用 JavaScript 函数刷新了浏览器页面：@{s19} 以及 @{s20} 命令。
In the example above, we had disabled the input box with the JavaScript function: document.getElementsByName('fullname')[0].setAttribute('disabled', '') along with the run script command, then enabled the same input box with the JavaScript function - document.getElementsByName('fullname')[0].removeAttribute('disabled') using the run script command. We had also refreshed the browser page with the JavaScript function: history.go[0] along with the execute script command.
我们还使用 JavaScript 函数 @{s21} 和 @{s22} 在浏览器的历史记录中分别向前和向后导航，并借助 @{s23} 命令。此外，我们在顶部测试用例名称旁边打了一个绿色勾，表示测试通过。
We had also navigated backward and forward in browser history using the JavaScript functions window.history.go(-1), and window.history.go(1) respectively with the help of the execute script command. Besides, we got a green tick beside the test case name at the top, signifying a passed test.
这结束了我们对 Selenium IDE 教程中 JavaScript 函数的全面介绍。我们从描述一些基本的 Selenium IDE 命令开始，这些命令用于运行 JavaScript 函数，并提供示例来演练如何将 JavaScript 函数与 Selenium IDE 一起使用。这样，您就能深入了解 Selenium IDE 中的 JavaScript 函数。最好不断实践你所学到的知识，并探索 Selenium 相关的其他知识来加深你的理解并拓宽你的视野。
This concludes our comprehensive take on the tutorial on Selenium IDE - JavaScript functions. We’ve started with describing some basic Selenium IDE commands to run JavaScript functions, and examples to walk through how to use the JavaScript functions along with Selenium IDE. This equips you with in-depth knowledge of the JavaScript functions in Selenium IDE. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.