## 1.5 web automation testing ### Introduction [`Selenium`](https://seleniumhq.github.io/selenium/docs/api/py/api.html) is a web automation testing framework that supports a variety of browsers, including Chrome, Safari, Firefox, and other major browsers. Thanks to Selenium's good support for Python, the Airtest-Selenium plugin was added to the Airtest Project. AirtestIDE can be used for **web automation** script recording, running and report generation. This article describes how to use AirtestIDE for web automation testing using Chrome driver. **Please note that this article is above 1,000 words. It may take up to 4 minutes to read it fully** ### Airtest-Selenium test framework diagram ![](5_get_started_with_web_test/1_web_framework.png) ### Recording video example ![demo](5_get_started_with_web_test/2_record_script_example.gif) ### Automated recording steps (Chrome only) - Install locally the [latest version of AirtestIDE](http://airtest.netease.com/changelog.html) and Chrome browser; - Open the Selenium auxiliary window: "Window" -> "Selenium Window" ![1_window](5_get_started_with_web_test/3_selenium_window.png) - Set Chrome local path: "Options" -> "Settings" -> "Selenium" -> "Set Chrome Path"; ![2_setting](5_get_started_with_web_test/4_chrome_settings.png) - Open the browser and generate the initialization code: Click ![11_start_web](5_get_started_with_web_test/5_start_browser_button.png) Open the browser - click the prompt that pops up in the edit box to generate the initialization code; ``` from selenium import webdriver from selenium.webdriver.common.keys import Keys from airtest_selenium.proxy import WebChrome driver = WebChrome() driver.implicitly_wait(20) ``` Note: this piece of code would be correctly inserted for WebFirefox, but no browser would be opened. - Generate code to access the URL to be tested: enter the web page to be tested in the browser and then click start_web in the auxiliary window: ```driver.get("http://news.baidu.com")``` - Start Airtest-Selenium script recording: Click Record ![4_record](5_get_started_with_web_test/5_start_record_button.png) and operate in the browser - End the recording of the script: Click the Run Script button ![12_run_button](5_get_started_with_web_test/6_run_button.png) - After the run, click the report button to view the report ![13_report](5_get_started_with_web_test/7_log_button.png) ### Auxiliary window When the user wants to generate a single code statement separately, the button of the auxiliary window can be used to help generate the desired operation. The buttons are divided into two categories which functions are described in detail below. ##### 1, Inspect class button After clicking this type of buttons, the code will not be generated directly; the browser will first enter the inspect mode, where the desired element can be selected. Then, the code will be generated in the edit box to perform the indicated function in the located element. Note: The code would be directly generated for Firefox browser, without any inspection mode. Please make sure you adapt it to your needs. ![5_inspect_button](5_get_started_with_web_test/8_inspect_buttons.png) 1. **Inspect button**: When clicking this button and selecting the page element, a statement selecting that element is generated. However, no operation code is generated here, the user should indicate which selenium statement to execute after the selection. Example: ```driver.find_element_by_xpath("//*[@id=\"navbarContent\"]/ul/li[2]/a")``` Other ways of finding elements supported* 2. **touch button**: When clicked, it generates code to click the selected element. Example: ```driver.find_element_by_xpath("//*[@id=\"navbarContent\"]/ul/li[2]/a").click()``` Note that the first part of the statement is the same for inspect button: the selection of the element. 3. **text button**: Clicking this button generates a statement for entering text in the selected element. After generating the code, the text parameter must be filled in. At the same time, a keyboard event can be defined, such as a carriage return, that will be performed after typing. Example: ```driver.find_element_by_xpath("//input[@placeholder='Search']").send_keys("Airtest Project", Keys.ENTER)``` 4. **assert button**: The assert button, when clicked, generates a statement that asserts if the element exists in the page at runtime. This is an Airtest-Selenium packaged statement. It returns 'True' if the element is found, and 'False' if it is not found. Can be used to test whether the script was successful. Example: ```driver.assert_exist("//*[@id=\"js-pjax-container\"]/div/header/div/nav/a[2]", "xpath")``` ##### 2, buttons that generate the code directly After clicking this type of buttons, code will be generated directly; No extra operations are required, but some buttons generate different parameters based on the current browser. ![10_operate](5_get_started_with_web_test/9_gen_code_buttons.png) 1. **start_web**: Click this button to generate a statement to set the page address on the current browser. Example: ```driver.get("https://github.com/AirtestProject")``` 2. **snapshot**: Click this button to generate a statement that takes a screenshot of the current page. Example: ```driver.snapshot()``` 3. **new_tab**: Click this button to generate a statement that jumps to the most recently opened tab. This is usually used after a statement that generates a new tab. Example: ```driver.switch_to_latest_window()``` 4. **previous_tab**: Click this button to generate a statement that jumps to the tab that was accessed before moving to the current tab (parent tab). Example: ```driver.switch_to_last_window()``` 5. **back**: Click this button to generate a statement that goes back to the previous page. Example: ```driver.back()``` 6. **forward**: Click this button to generate a statement that advances to the next page. Example:```driver.forward()``` ### Multi-tab recording logic Airtest-Selenium is a test framework that supports multi-tab operations. The rules for switching between different tabs are described in detail in this section. Airtest-Selenium uses the ```driver.switch_to_last_window()``` and ```driver.switch_to_latest_window()``` interfaces to handle the logic between different tabs. Use ```driver.switch_to_latest_window``` after a new tab is generated, for example, as a result of clicking a certain element: ``` Driver.find_element_by_xpath("//a[@href='http://news.cctv.com/world/']").click() Driver.switch_to_latest_window() ``` Explanation: The browser is originally on the first tab page (A). After the first sentence runs, another tab page is generated (B). Since the browser's behaviour is to jump to the new tab, most use cases would need to operate on this newly opened B tab. In order to tell the web driver to load the B's dom tree structure instead of A's, the ```driver.switch_to_latest_window()``` statement is required. Use ```driver.switch_to_last_window()``` statement to go back to the tab prior to the ```driver.switch_to_latest_window``` execution. In the example above, after the operation on the B tab page is completed, use ```driver.switch_to_last_window()``` in order to tell the web driver to load the A's dom tree structure again instead of B's. The next line of script will be executed on the A tab. In the recording mode, when the user generates a new tab through an operation, Airtest-Selenium recognizes the change of the tab and switches to the latest tab, generating the corresponding code in the edit box. Click on 'Close tab' and Airtest-Selenium will jump back to the previous tab, generating the code to close and recall the tab in the edit box. Here is a small video to see the effects of multi-tab recording: ![tabs_new](5_get_started_with_web_test/10_multi_tabs.gif)