Selenium 简明教程

Selenium IDE - Creating Script

可以使用 Selenium IDE 创建自动化测试脚本。最新版本的 Selenium IDE 可作为 Chrome 和 Firefox 扩展使用。为了在 Selenium IDE 中创建测试,基本前提是从各自的网络商店中下载 Chrome 或 Firefox 的 Selenium IDE 扩展。

Selenium IDE can be used to create test scripts for automation. The latest version of Selenium IDE is available as extensions for both Chrome and Firefox. In order to create tests on Selenium IDE, the basic prerequisite would be to download the Chrome or Firefox extension for Selenium IDE from their respective web stores.

一旦开始在 Selenium IDE 中创建脚本,我们就能找到测试脚本编辑器框,其中每个部分都有需要执行的特定功能。

Once we would start creating a script in Selenium IDE, we would get hold of the test script editor box where each part of the script editor box has a specific functionality to perform.

Creating a Test Script in Selenium IDE

在 Selenium IDE 中创建测试脚本的步骤如下:

The steps to create a test script in Selenium IDE are listed below −

Step 1 − 单击浏览器上在安装后显示的 Selenium IDE 扩展。

Step 1 − Click on the Selenium IDE extension visible on the browser after its installation.

selenium ide creating script 1

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.

selenium ide creating script 2

Step 3 - 我们将单击选项 Record a new test in a new project 。然后输入 PROJECT NAME ,如 SeleniumIDE1 。最后,单击“确定”。

Step 3 − We would click on the option Record a new test in a new project. After which we would need to enter the PROJECT NAME, say SeleniumIDE1. Finally, we would click OK.

selenium ide creating script 3

Step 4 - 在 Selenium IDE 中开始创建测试之前,我们需要指定应用程序的 Base URL,我们将在该 URL 上录制并创建测试。在下面的图片中,我们输入了 Base URL: https://www.tutorialspoint.com/selenium/ 。最后,需要单击 Start Recording

Step 4 − Before starting with creating a test in Selenium IDE, we would need to specify the application Base URL, where we would record and create the test. In the below image, we had entered the Base URL: https://www.tutorialspoint.com/selenium/. Finally, we would need to click on the Start Recording.

selenium ide creating script 4

Step 5 - 在步骤 4 中提供了 Base URL 的相应应用程序应使用 Selenium IDE 徽标和红色的 Selenium IDE 录制消息打开。此外,在 Selenium IDE 顶部应该会出现一个红色图标(如下面的图片中突出显示),表示正在应用程序中进行录制。

Step 5 − The corresponding application whose Base URL had been provided in Step4 should be opened with Selenium IDE logo and Selenium IDE recording message in red. Also, a red icon (highlighted in the below image) should be visible at the top of the Selenium IDE, denoting recording is in progress in the application.

selenium ide creating script 5

Step 6 − 我们将在应用程序上执行一些步骤,相应步骤将以 Selenium IDE 中记录。

Step 6 − We would perform some steps on the application and corresponding steps would be recorded in the Selenium IDE as well.

selenium ide creating script 6

Step 7 − 一旦所有测试执行完毕,我们将通过单击上文第 5 步中提到的红色图标停止录制。然后,我们需要为测试输入名称。在下图中,我们在 TEST NAME 里输入了 TestCase1。最后,我们将单击确定。

Step 7 − Once all the tests have been performed, we would stop the recording by clicking on the red icon as mentioned above in Step5. After which, we would need to enter a name for the test. In the below image, we had entered the TEST NAME as TestCase1. Finally, we would click on the OK.

selenium ide creating script 7

Step 8 − 我们在应用程序上执行的所有步骤将在 Selenium IDE 中的命令、目标和值字段下记录。此外,测试用例名称 - TestCase1 将在左窗格中显示,右上角会有一个 REC 按钮。

Step 8 − All the steps that we had performed on the application would be recorded in the Selenium IDE under the Command, Target, and Value fields. Also, the test case name - TestCase1, would be visible to the left pane along with a REC button to the top right.

下图中高亮显示的部分描绘了 Selenium IDE 中的文本脚本编辑器面板。它包含了以测试步骤形式记录的用户交互,这些步骤是在启用录制时记录的。文本脚本编辑器面板也有三列 - 命令、目标和值。

The portion highlighted in the below image depicts the Text Script Editor Panel in Selenium IDE. It comprises user interactions that are recorded in the form of test steps that are recorded while recording is enabled. The Text Script Editor Panel also has three columns - Command, Target, and Value.

命令列包括 Selenium 命令,目标列包含定位器值、URL 等。最后,值列可用于传递要输入的值。

The Command column comprises Selenium commands, Target column contains locator values, URL, and so on. Finally, the Value column can be used to pass on the value to be entered.

selenium ide creating script 8

如果选择特定步骤(就像下图中的步骤 3),则会启用 Enable/Disable command 选项。在选择它后,该特定步骤命令将禁用,并在左侧显示 // 符号。

If a particular step is selected (just like the step 3 in the below image), the Enable/Disable command option would be enabled. On selecting it, that specific step command would get disabled with a // sign at the left.

一旦测试触发,将执行所有步骤,但排除禁用的命令。我们可以再次单击 Enable/Disable command 按钮来启用相同的步骤,并且 // 符号也将消失。所以 Enable/Disable command 是文本脚本编辑器的另一重要组成部分。

Once the test is triggered, all the steps excluding the disabled command would get executed. We can enable the same step by clicking the Enable/Disable command button again and // sign would also disappear. So the Enable/Disable command is another important part of the Text Script Editor.

selenium ide creating script 9

在某些情况下,我们观察到单击网页上的链接/按钮时,会出现一个新窗口,可以使用下图中高亮的 Add new window configuration 按钮来处理此类情况。

In some cases, it is observed that on clicking a link/button on a web page, a new window would appear, this type of situation can be handled using the Add new window configuration button as highlighted in the below image.

selenium ide creating script 10

单击它后,会出现一个带有消息 New Window Configuration 的弹出窗口。我们需要勾选 New Window Configuration Enabled 复选框,输入 WINDOW NAME ,然后单击 Confirm

On clicking it, a popup with the message New Window Configuration would appear. We would need to check the checkbox New Window Configuration Enabled, enter a WINDOW NAME, and click on Confirm.

selenium ide creating script 11

为了让 Selenium IDE 自动定位元素,我们可以使用 Select target in page 按钮。

In order to locate an element automatically by Selenium IDE, we can use the Select target in page button.

selenium ide creating script 12

一旦单击,它将为用户提供 Select an element 选项,基于此,Selenium IDE 将自动生成其定位器值。

Once clicked, it would give the user the option to Select an element, and based on that, its locator value will be generated automatically by Selenium IDE.

selenium ide creating script 13

相应的定位器值将在目标中生成。而且,之后,如果 Find target in page 被选中,将高亮显示其定位器值被生成的元素。

The corresponding locator value would be generated in the Target. Also, after which, if the Find target in page is selected, the element whose locator value is generated, will be highlighted.

selenium ide creating script 14

请注意,按钮 Find target in page, Select target in page, Add new window configurationEnable/Disable command 仅在我们有命令字段内容时启用,否则它们会保持禁用,如下面的图片中突出所示。

Please note that, the buttons - Find target in page, Select target in page, Add new window configuration, and Enable/Disable command become enabled only if we have something in the Command field else they remain disabled as highlighted in the below image.

selenium ide creating script 15

Step 9 − 一旦创建了测试,我们就可以通过单击它来获得该步骤的详细信息。完成后,它将在底部的命令、目标和值字段下显示。在下例中,我们点击了第四步,其中 Command, TargetValue 字段的值分别为 type, id=nameSelenium 。在此步骤中,我们基本在 input 框中输入了文本 Selenium,该 input 框由 id 定位器识别,其值是 name。

Step 9 − Once the test would be created, we would be able to get the details on that step, by clicking on it. Once done, it would be visible under the Command, Target, and Value fields at the bottom. In the below example, we had clicked on the fourth step, where the values of Command, Target, and Value fields are type, id=name, and Selenium respectively. In this step, we had basically entered the text Selenium in an input box which was identified with the id locator having the value as name.

Text Script Editor Panel 内,我们可以通过选择一个步骤来编辑命令、目标和值。

Within the Text Script Editor Panel, we can edit Command, Target, and Value by selecting a step.

selenium ide creating script 16

Step 10 − 如果我们在目标字段中单击下拉菜单,我们会注意到 Selenium IDE 在录制时成功捕获了该元素的所有其他定位器值。在下例中,我们点击了第四步,其中 Command, TargetValue 字段的值分别为 type, id=nameSelenium 。在此步骤中,该元素的 name、css 等其他定位器值在目标下拉菜单中可见。

Step 10 − If we would click on the dropdown in the Target field, we would observe that Selenium IDE while recording was successful in capturing all the other locator values for an element. In the below example, we had clicked on the fourth step, where the values of Command, Target, and Value fields were type, id=name, and Selenium respectively. In this step, other locator values like the name, css, and so on for that element were visible within the Target dropdown.

selenium ide creating script 17

Step 11 − 一旦我们点击创建的测试的任何步骤,我们会通过导航到下面的 Reference 标签获得命令和进行操作的详细信息。

Step 11 − Once we would click on any step of the test we had created, we would get the details of the command and the action taken place, by navigating to the Reference tab at the below.

selenium ide creating script 18

Step 12 − 我们可以右键单击任何步骤,并获得手动插入新命令(用于添加新步骤)、剪切、复制、清除、切换断点(用于调试)以及在步骤上进行其他操作的选项。

Step 12 − We can right click on any step and get the option to manually insert a new command(for addition of a new step), cut, copy, clear, Toggle breakpoint (used for debugging) on a step, and so on.

selenium ide creating script 19

Step 13 − 要运行创建的测试,我们会点击顶部 Run current test 按钮,如下面的图片所示。

Step 13 − To run the test created, we would click on the Run current test button at the top as shown in the below image.

selenium ide creating script 20

如果有许多测试,我们需要点击 Run all tests 按钮,如下图所示。

In case, there are multiple tests, we would need to click on the Run all tests button as shown in the below image.

selenium ide creating script 21

如果有断点添加到步骤,我们需要点击 Step over current command 按钮,如下图所示,步骤 2 和 4 有断点。

In case there are breakpoints added to steps, we would need to click on the Step over current command button as shown in the below image where the steps 2, and 4 have breakpoints.

selenium ide creating script 22

Step 14 − 我们可以使用 Test execution speed 按钮来控制测试执行速度,如下图所示。

Step 14 − We can control the speed of test execution using the Test execution speed button as shown in the below image.

selenium ide creating script 23

在 Selenium IDE 中,速度默认设置为“快速”。

By default, the speed is set to Fast in Selenium IDE.

selenium ide creating script 24

Step 15 − Selenium IDE 提供一个选项来创建、打开和保存项目,方法是使用右上角图标,如下图所示。

Step 15 − Selenium IDE gives the option to Create, Open and Save a project using the icons at the top right upper corner as highlighted on the below image.

selenium ide creating script 25

我们保存项目并继续。一旦保存,我们需要给项目命名并选择项目保存位置。

We would Save our project and continue. Once saved, we would be required to give a Name and location where our project would be saved.

selenium ide creating script 26

Step 16 − 我们使用 Run current test 按钮运行测试 - TestCase1。

Step 16 − We would run the test - TestCase1 using the Run current test button.

Run current test − 执行完成后,我们会收到结果信息。如果测试通过,我们在 Selenium IDE 底部的“日志”选项卡中会收到信息 - <测试名称> 执行成功。这里,我们的测试名称是 TestCase1,因此收到信息 - TestCase1 completed successfully

Step 17 − Once the execution would be completed, we would get the message of the result. In case the test passed, we would get the message - <TEST NAME> completed successfully under the Log tab at the bottom of the Selenium IDE. Here, our test name was TestCase1, hence received the message - TestCase1 completed successfully.

除此之外,所有的测试步骤(包括测试用例名称)都变为绿色,表示所有步骤均 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.

因此,在 Selenium IDE 中,我们将在测试步骤级别获取有关测试结果的信息,并且仅当所有步骤都成功执行时,我们才将在测试用例级别获得 PASS。

Thus, in Selenium IDE, we would get the information about the test results both at the test step level and only if all the steps would be executed successfully, we would get a PASS at the test case level as well.

selenium ide creating script 27

因此,在本教程中,我们讨论了使用 Selenium IDE 创建脚本。

Thus, in this tutorial, we had discussed creating a script using the Selenium IDE.