## 1.5 web测试 **本文约2200字,阅读全文可能将花费7分钟**。 ### 1. Airtest-Selenium测试框架原理图 [`Selenium`](https://seleniumhq.github.io/selenium/docs/api/py/api.html)是一款web自动化测试框架,它支持各种浏览器,包括 Chrome,Safari,Firefox 等主流浏览器。 得益于Selenium对Python的良好支持,我们在Airtest Project中添加了Airtest-Selenium插件,我们可以使用AirtestIDE进行**web自动化**脚本录制、脚本运行和报告生成。本文将介绍如何使用AirtestIDE进行web自动化测试。 ![](5_get_started_with_web_test/1_web_framework.png) ### 2. 录制视频示例 ![demo](5_get_started_with_web_test/airtest_selenium.gif) ### 3. 自动化录制详细步骤 (针对Chrome) - 本地安装[最新版AirtestIDE](http://airtest.netease.com/changelog.html)以及Chrome浏览器; - 开启Selenium辅助窗:“窗口”-“Selenium Window” ![1_window](5_get_started_with_web_test/3_selenium_window.png) - 设置Chrome本地路径:“选项”-“设置”-“Selenium”-“设置Chrome路径”; ![2_setting](5_get_started_with_web_test/4_chrome_settings.png) - 开启浏览器并生成初始化代码:点击![11_start_web](5_get_started_with_web_test/5_start_browser_button.png) 开启浏览器-点击编辑框中弹出的提示,生成初始化代码; ``` from selenium import webdriver from selenium.webdriver.common.keys import Keys from airtest_selenium.proxy import WebChrome driver = WebChrome() driver.implicitly_wait(20) ``` 注意:对于Firefox,这段代码可以正确插入,但是不会打开任何浏览器 - 生成访问待测试网址的代码:浏览器中进入待测试的网页-点击辅助窗的start_web; ```driver.get("http://news.baidu.com")``` - 开始Airtest-Selenium脚本录制:点击录制![4_record](5_get_started_with_web_test/5_start_record_button.png) - 在浏览器进行操作 - 结束录制,运行脚本:点击运行脚本按钮![12_run_button](5_get_started_with_web_test/6_run_button.png) - 运行结束后,点击报告按钮,查看报告![13_report](5_get_started_with_web_test/7_log_button.png) ### 4. 辅助功能窗 当用户想单独生成某一条代码语句时,可以通过辅助窗的按钮来帮助生成想要的操作。下面把辅助窗的按钮分为三类,并分别对其功能进行详细说明。 ##### ① Inspect类按钮 这一类按钮点击后,不会直接生成代码;浏览器会进入inspect模式,用户可以在浏览器中选择自己想要操作的元素进行点击,然后编辑框内会生成代码定位到对应元素,并生成对应操作的代码。 ![5_inspect_button](5_get_started_with_web_test/8_inspect_buttons.png) 如果您使用Firefox而不是Chrome,您将看到脚本编辑器中插入的命令,但是您不能在浏览器中直接执行任何操作。 1. **Inspect按钮**: 点击这个按钮后,选取页面元素,会生成一个定位到该元素的语句。但不会在后面生成对应的操作代码,用户可以自行补充想要执行的selenium语句。例: ```driver.find_element_by_xpath("//*[@id=\"navbarContent\"]/ul/li[2]/a")``` 还支持其他查找元素的方法* 2. **touch按钮**:这个按钮,点击后会生成点击对应元素的代码。例: ```driver.find_element_by_xpath("//*[@id=\"navbarContent\"]/ul/li[2]/a").click()``` 3. **text按钮**:点击这个按钮,会生成一条在指定元素内输入文本的语句,生成代码后,用户需自行在内部填入需要输入的文本。同时,用户可以定义在输入后执行某个键盘事件,如回车。例: ```driver.find_element_by_xpath("//input[@placeholder='Search']").send_keys("Airtest Project", Keys.ENTER)``` 4. **assert按钮**:assert按钮在点击后,生成一条assert页面元素是否存在的语句。这是一条Airtest-Selenium封装的语句,在运行时会尝试用参数代表的方法去寻找元素,如果找到会返回True,如果没找到会返回False。可用于测试脚本是否成功的判读。例: ```driver.assert_exist("//*[@id=\"js-pjax-container\"]/div/header/div/nav/a[2]", "xpath")``` ##### ② Airtest图像识别类按钮 这一类按钮,点击后进入截取图像模式,对当前屏幕进行框选区域并截图。 ![11_airtest_button](5_get_started_with_web_test/11_airtest_buttons.png) 1. **airtest_touch**: 点击该按钮开启截屏模式,对当前屏幕进行截屏,可从浏览器中截取区域图片。表示对截取图片进行点击。例: ![12_airtest_touch](5_get_started_with_web_test/12_airtest_touch.png) 2. **assert_template**: 点击该按钮后,对当前屏幕截图。表示断言当前浏览器存在该图片。例 ![13_assert_template](5_get_started_with_web_test/13_assert_template.png) ##### ③ 直接生成代码按钮 这一类按钮,点击后直接生成代码。不需多余操作,不过部分按钮会根据当前浏览器实际情况生成不同的参数。 对于Firefox,不会在页面上显示检视器,而是直接生成代码 ![10_operate](5_get_started_with_web_test/9_gen_code_buttons.png) 1. **start_web**: 点击该按钮后生成当前浏览器所访问的页面地址的语句。例: ```driver.get("https://github.com/AirtestProject")``` 2. **snapshot**: 点击该按钮后生成对当前页面进行截图的语句。例: ```driver.snapshot()``` 3. **new_tab**: 点击该按钮生成一条跳转在最新出现的标签页的语句,一般用在一个生成新的标签页的语句后面。例:```driver.switch_to_latest_window()``` 4. **previous_tab**: 点击该按钮生成一条跳转到当前标签页之前的标签页(父标签)的语句。例:```driver.switch_to_last_window()``` 5. **back**: 点击该按钮,生成后退到上一个页面的语句。例:```driver.back()``` 6. **forward**: 点击该按钮,生成前进到下一个页面的语句。例:```driver.forward()``` ### 5. 多标签录制逻辑 Airtest-Seleniums是一个支持多标签页操作的测试框架,不过为了保证运行和录制时的一致性,也为了让用户理解清楚标签的切换规则,这里要说明一下不同标签页之间切换操作的规则。 Airtest-Selenium中用```driver.switch_to_previous_tab()```和```driver.switch_to_new_tab()```两个接口来处理不同标签页之间的逻辑。```driver.switch_to_new_tab()```接在当新的标签页生成的时候,会跳转到最新的标签页。例如: ``` driver.find_element_by_xpath("//a[@href='http://news.cctv.com/world/']").click() driver.switch_to_new_tab() ``` 执行这两句话之前,本来浏览器在A标签页,这时运行了第一句话,生成了B标签页,同时浏览器也跳转到了B标签页中。这时如果需要继续写基于B标签页的逻辑,需要执行```driver.switch_to_new_tab()```这个语句,这个语句告诉ChromeDriver要去爬B标签页而不再是A的dom树结构了。 而```driver.switch_to_previous_tab()```这个语句则是用在```driver.switch_to_new_tab()```之后,与其配对存在。上文相同的例子,我在B标签页做完了操作以后,可以通过```driver.switch_to_previous_tab()```这个接口告诉ChromeDriver,不再管B了,重新去获取A的dom树结构。然后就可以继续基于A标签页写接下来的逻辑脚本了。 在录制模式下,当用户通过一个操作生成新的标签页时,Airtest-Selenium会识别出标签页的变化,并切换到最新的标签页,同时在编辑框内生成切换标签页的代码。在新的标签页执行完操作后,点击关闭标签页,Airtest-Selenium则会跳回到上一个生成该标签的标签页,同时在编辑框内生成关闭和调回标签页的代码。 这里用一个小视频来看看多标签页录制的效果: ![tabs_new](5_get_started_with_web_test/10_multi_tabs.gif)