51Testing软件测试论坛

标题: 【原创】Playwright 实战技巧大揭秘 [打印本页]
作者: lsekfe    时间: 2024-8-27 10:33
标题: 【原创】Playwright 实战技巧大揭秘
一：实施的背景
相信使用过Selenium WebDriver的小伙伴对其最大的诟病有3点，一是浏览器的driver和版本对应问题，第二是Selenium的执行速度，最后一个槽点是对页面元素文本值的断言非常不便。在我们长期维护大量UI自动化测试用例的过程中这两个痛点会让我们耗费不少精力和时间。
二：PlayWright最佳实践2.1为何要选择PlayWright？
对Selenium的痛点，PlayWright给出了完美的解决方案！
PlayWright的架构：
[attach]148042[/attach]

Playwright使用Chrome DevTools 协议与 Chromium 通信。一旦触发测试，client端代码将被转换为JSON格式，然后使用websocket协议发送到服务器。
Playwright通过单个 websocket 协议连接传达所有请求，该连接将保持不变，直到所有测试执行完成。由于命令是在单个连接上发送的，因此测试失败或不稳定的可能性较小，并且命令可以快速执行。
Playwright启动速度比较快,拥有更多的定位方式,不需要安装驱动,能够在多个平台上运行,提供录制功能实现录制用例视屏,使用上来说Playwright也比较容易,无需过多封装即可直接使用.
2.2 环境部署
安装playwright前先配置好node和python环境，之后通过pip来安装playwright和其他库。
以Mac OS为例，执行如下命令:
安装playwright库
pipinstall playwright
然后安装browsers(会安装chromium,firefox,webkit浏览器)
playwrightinstall
如果只想安装指定的browser，则执行如下命令
playwright installchromium
2.3 重要的名词
在开始尝试使用playwright之前，需要先了解它的几个重要概念。
Browser：是一个浏览器实例，代表一个浏览器会话。它是一个全局的上下文，可以包含多个BrowserContext。
使用：创建浏览器实例管理浏览器生命周期：可以启动浏览器、关闭浏览器等。
  1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
  2. def test_api_show(playwright: Playwright):
  3.     browser = playwright.chromium.launch()
  4. </font>
复制代码
BrowserContext：是浏览器中的一个隔离环境，可以包含多个 Page。每个BrowserContext有自己的浏览器存储，例如 cookies 和本地存储。
使用：创建新的上下文，管理上下文。可以添加页面、关闭页面等。
  1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
  2. def test_api_show(playwright: Playwright):
  3.     browser = playwright.chromium.launch()
  4.     context = browser.new_context()
  5. </font>
复制代码
Page：是浏览器中的一个标签页，可以进行页面导航、操作 DOM 元素、捕获页面截图等。
使用：导航页面，操作 DOM 元素，捕获页面截图，处理页面事件。
  1. <font face="微软雅黑" size="3">from playwright.sync_api import Playwright
  2. def test_api_show(playwright: Playwright):
  3.     browser = playwright.chromium.launch()
  4.     context = browser.new_context()
  5.     page = context.new_page()
  6.     page.goto("")
  7. </font>
复制代码
2.4 元素定位
元素定位是PlayWright的核心部分，我们会详细演示常用方法的使用。
get_by_placeholder：根据页面元素的placeholder属性值定位
[attach]148043[/attach]

以上图为例，我们想定位<销售机会名称>输入框可以使用get_by_placeholder方法。
page.get_by_placeholder("销售机会名称").fill("商机名称")

get_by_role：允许通过元素的ARIA角色、ARIA属性和可访问名称来定位它们。
初次使用get_by_role方法可能会有点懵，因为不知道元素的role该写为什么！
PlayWright官网上给出了role的类型：
  1. <font face="微软雅黑" size="3">role "alert" | "alertdialog" | "application" | "article" | "banner" | "blockquote" | "button" | "caption" | "cell" | "checkbox" | "code" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "deletion" | "dialog" | "directory" | "document" | "emphasis" | "feed" | "figure" | "form" | "generic" | "grid" | "gridcell" | "group" | "heading" | "img" | "insertion" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "meter" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "paragraph" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "strong" | "subscript" | "superscript" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "time" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"</font>
复制代码
[attach]148044[/attach]


在上图销售机会新建页右上角，有<取消>和<保存>两个button组件。定位它们，可以用get_by_role。
  1. <font face="微软雅黑" size="3">page.get_by_role("button", name="保存").click()</font>
复制代码
[attach]148045[/attach]

上图中，销售阶段的下拉框选项值是一个div元素，除了xpath或者css-selector方式外很难想到其他发方式来定位到它。但是在PlayWright中，我们可以使用get_by_role来处理它，具体的代码如下:
//点击下拉框选项值的父级元素，即:div。
  1. <font face="微软雅黑" size="3">page.locator(parent_locator_path).locator("visible=true").click()</font>
复制代码
// 直接处理选项值，根据has_text=””来选中下拉选项值
  1. <font face="微软雅黑" size="3">page.get_by_role("listitem").filter(has_text=item_name).click()</font>
复制代码
get_by_text：根据包含的文本值定位元素
[attach]148046[/attach]


page.locator('//div[@x-placement="bottom-start"]').get_by_text(model_name, exact=True).locator("visible=true").click()
locator：可以在定位器的子树中找到一个与指定选择器匹配的元素。它还可以过滤选项值。
locator可以接受任何形式定位方式，也就是说locator_path可以是id，xpath，css，role等。

  1. <font face="微软雅黑" size="3">locator(locator_path).locator("visible=true").click()
  2. page.locator("locator_path", has_text="")
  3. page.locator("locator_path", has_not_text="")
  4. </font>
复制代码
索引nth
大多数时候，我们会遇到在一个页面上存在多个类似元素的情况。如下图，页面中存在多个类似的元素，这种业务场景下，我们可以考虑先定位一组元素然后根据返回的元素列表的索引来定位到具体的组件。

[attach]148047[/attach]


  1. <font face="微软雅黑" size="3">relation_list =page.locator('//div[@class="field-input-block__suffix"]').locator("visible=true")
  2. relation_list.nth(element_index).click()
  3. </font>
复制代码
filter: 这个方法根据选项缩小现有定位器的范围，例如按文本过滤。它可以被链接起来进行多次过滤。
[attach]148048[/attach]


  1. <font face="微软雅黑" size="3">page.get_by_role("listitem").filter(has_text=item_name).click()</font>
复制代码
2.5 交互动作在UI自动化测试工作中，我们经常用到的页面交互无非是点击，输入，刷新这三个动作。
PlayWright对上面三种交互动作都提供了支持。
click：点击元素
  1. <font face="微软雅黑" size="3">page.get_by_placeholder(place_holder, exact=True).click()</font>
复制代码
fill：输入文本
  1. <font face="微软雅黑" size="3">page.locator(locator_path).locator("visible=true").fill(input_context)</font>
复制代码
reload()：重载页面
select_option：从下拉选项值中选择
官网示例的页面元素
  1. [font=微软雅黑][size=3]<select multiple>
  2.   <option value="red">Red</div>
  3.   <option value="green">Green</div>
  4.   <option value="blue">Blue</div>
  5. </select>
  6. [/size][/font]
复制代码
使用select_option的示例：

  1. <font face="微软雅黑" size="3">element.select_option("blue")
  2. element.select_option(label="blue")
  3. element.select_option(value=["red", "green", "blue"])
  4. </font>
复制代码


set_checked：设置复选框或单选按钮元素的状态
  1. <font face="微软雅黑" size="3">page.get_by_role("checkbox").set_checked(True)</font>
复制代码
2.6 强大的断言PlayWright自带断言功能，并且我们可以很方便地获取到页面里各种容器元素下所有的文本值。

  1. <font face="微软雅黑" size="3">all_inner_texts/inner_text
  2. # 获取容器内的文本值
  3. def get_inner_text_on_list(self, data_key_name):
  4.     # 根据列表页的主键获取一行数据的文本值(返回的是str，也是奇葩)
  5.     text_list = self.page.get_by_role("row", name=data_key_name).locator("visible=true").inner_text()
  6.     return text_list
  7. </font>
复制代码
断言expect

  1. <font face="微软雅黑" size="3"># 判断系统里一闪而过的tips文案
  2. def assert_action_success(self):
  3.    expect(self.page.locator('//p[@class="el-message__content"]')).to_contain_text("成功")
  4. </font>
复制代码
2.7 PageObject模式封装PO模式不作过多介绍了，相信读者朋友们或多或少都有了解。下面直接上代码。
封装playwright的基础操作
[attach]148049[/attach]


Base包里封装了页面元素的基本操作，包含了元素定位,点击输入,断言等通用功能点的封装。

  1. <font face="微软雅黑" size="3"># -*- encoding = utf-8 -*-
  2. # Author：晴空-姜林斌
  3. # Date：2024-06-06
  4. from playwright.sync_api import sync_playwright, expect
  5. web_host = "https://appwebfront.xbongbong.com/"
  6. class Base:
  7.     def __init__(self):
  8.         self.playwright = sync_playwright().start()
  9.         self.browser = self.playwright.chromium.launch(headless=False)
  10.         self.context = self.browser.new_context()
  11.         self.page = self.context.new_page()
  12.         # 地址路由
  13.         self.url_dict = {"MULTI_PROD_WEB_MARKET_LIST": "/#/market-manage/market-activity?subBusinessType=8100&appId=185800&menuId=2000341&saasMark=1&distributorMark=0",
  14.                          "MULTI_PROD_WEB_CLUE_LIST": "/#/market-manage/sales-leads?subBusinessType=8001&appId=185800&menuId=2000343&saasMark=1&distributorMark=0"}

  16.     # 根据placeholder定位字段并输入内容
  17.     def input_by_placeholder(self, place_holder, send_keys):
  18.         self.page.get_by_placeholder(place_holder, exact=True).fill(send_keys)

  20.     # 根据placeholder定位并点击
  21.     def click_by_placeholder(self, place_holder):
  22.         self.page.get_by_placeholder(place_holder, exact=True).click()

  24.     # 输入编号信息(系统中的编号-流水号字段)
  25.     def input_serial(self, send_keys):
  26.         self.page.get_by_placeholder("流水号", exact=True).clear()
  27.         self.page.get_by_placeholder("流水号", exact=True).fill(send_keys)

  29.     # locator操作控件并输入内容 支持css-selector xpath id格式
  30.     def input_by_locator(self, locator_path, input_context):
  31.         self.page.locator(locator_path).locator("visible=true").fill(input_context)

  33.     # 根据locator定位组件并点击
  34.     def click_by_locator(self, locator_path):
  35.         self.page.locator(locator_path).locator("visible=true").click()
  36.         self.sleep(500)

  38.     # 点击button组件
  39.     def click_button(self, button_name):
  40.         self.page.get_by_role("button", name=button_name, exact=True).click()
  41.         if str(button_name) in "保存修改删除":
  42.             self.sleep(2000)
  43.         else:
  44.             self.sleep(1000)

  46.     # 根据下列选项的值选择
  47.     def set_opportunity_stage(self, item_name):
  48.         self.click_by_locator("//form/div[7]/div/div/div/div[1]/span")
  49.         self.page.get_by_role("listitem").filter(has_text=item_name).click()

  51.     # 设置任务的所属阶段
  52.     def set_task_stage(self, item_name):
  53.         self.click_by_locator("//form/div[8]/div/div/div/div/input")
  54.         self.page.get_by_role("listitem").filter(has_text=item_name).click()

  56.     # 设置风险的所属阶段
  57.     def set_risk_stage(self, item_name):
  58.         # 设置任务的所属阶段
  59.         self.click_by_locator("//form/div[8]/div/div/div/div[1]/input")
  60.         self.page.get_by_role("listitem").filter(has_text=item_name).click()

  62.     # 设置企微销售机会的阶段
  63.     def set_wechat_opportunity_stage(self, item_name):
  64.         self.click_by_locator("//form/div[7]/div/div/div/div[1]/span")
  65.         self.page.get_by_role("listitem").filter(has_text=item_name).click()

  67.     # 关闭详情页
  68.     def close_detail(self):
  69.         self.click_by_locator('//div[@class="title__close-btn"]')

  71.     # 新建页切换模板
  72.     def switch_model(self, model_name):
  73.         self.click_by_placeholder("请选择模板")
  74.         self.page.locator('//div[@x-placement="bottom-start"]').get_by_text(model_name, exact=True).locator("visible=true").click()
  75.         self.sleep(1000)

  77.     # 选择单选
  78.     def select_single_member(self, add_index, member_name):
  79.         radio_button_list = self.page.locator('//div[@class="user-radio-btn"]').locator("visible=true")
  80.         radio_button_list.nth(add_index).click()
  81.         self.page.locator('//div[@class="person-tabs"]').get_by_placeholder("请输入内容").fill(member_name)
  82.         self.sleep(1000)
  83.         self.page.locator('//div[@class="user-tab-content__user"]/div/label/span[1]').click()
  84.         self.sure_on_dialog()

  86.     # 服务云 独用的成员单选
  87.     def single_team_for_service_cloud(self, add_index, member_name):
  88.         radio_button_list = self.page.locator('//div[@class="user-radio-btn-block"]').locator("visible=true")
  89.         radio_button_list.nth(add_index).click()
  90.         self.page.locator('//div[@class="person-tabs"]').get_by_placeholder("请输入内容").fill(member_name)
  91.         self.sleep(1000)
  92.         self.page.locator('//div[@class="user-tab-content__user"]/div/label/span[1]').click()
  93.         self.sure_on_dialog()

  95.     # 点击超链接
  96.     def partial_link(self, link_text):
  97.         locator_path = 'a:has-text("' + str(link_text) + '")'
  98.         self.page.locator(locator_path).locator("visible=true").click()
  99.         self.sleep(1000)

  101.     # 单据详情页 更多-关联新建
  102.     def new_on_detail(self, business_name):
  103.         link_business_locator = 'li:has-text("' + str(business_name) + '")'
  104.         self.page.get_by_role("button", name="", exact=True).click()
  105.         self.page.locator(link_business_locator).click()

  107.     # 单据新建/编辑页 选择所有关联产品
  108.     def select_all_products(self):
  109.         self.page.locator("span:has-text('添加产品')").locator("visible=true").click()
  110.         self.page.locator("//table/thead/tr/th[1]/div/label/span").locator("visible=true").click()
  111.         self.click_button("确定")

  113.     # 单据详情页查看 更多-tab栏
  114.     def view_more_tab_on_detail(self, tab_name):
  115.         self.page.locator('//div[@class="detail-tabs-more-button"]').locator("visible=true").click()
  116.         self.page.wait_for_timeout(1000)
  117.         tab_path = "li:has-text('" + str(tab_name) + "')"
  118.         self.page.locator(tab_path).locator("visible=true").click()

  120.     # 详情页的复制/编辑/删除
  121.     def copy_and_edit_on_detail(self, action_name):
  122.         button_list = self.page.locator('//div[@class="detail-permission-bts"]/div').locator('[type="button"]').all()
  123.         for button_element in button_list:
  124.             if button_element.inner_text().__contains__(action_name):
  125.                 button_element.click()
  126.                 self.sleep(1000)
  127.                 break
  128.             else:
  129.                 continue

  131.     # 列表搜索
  132.     def search_on_list(self, search_condition):
  133.         self.page.locator('//div[@class="search"]/div/input').fill(search_condition)
  134.         self.page.locator('//div[@class="search"]/div/div').locator("visible=true").click()

  136.     # 列表页新建
  137.     def new_on_list(self):
  138.         self.click_button("新建")

  140.     # 详情页的复制-编辑-删除
  141.     def common_action_on_detail(self, action_name):
  142.         locator_name = " " + str(action_name)
  143.         self.page.get_by_role("button", name=locator_name).locator("visible=true").click()

  145.     # 跳转到指定列表
  146.     def go(self, url_key):
  147.         list_url = self.url_dict[url_key]
  148.         self.page.goto(web_host + str(list_url))
  149.         self.sleep(3000)

  151.     # 强制等待，单位毫秒
  152.     def sleep(self, wait_duration):
  153.         self.page.wait_for_timeout(wait_duration)

  155.     # 刷新页面
  156.     def refresh(self):
  157.         self.page.reload(timeout=10000)

  159.     # 关联数据选择 支持系统和自定义
  160.     def select_relation_data(self, model, element_index, relation_data_name):
  161.         if str(model) == "saas":
  162.             saas_relation_list = self.page.locator('//div[@class="field-input-block__suffix"]').locator("visible=true")
  163.             saas_relation_list.nth(element_index).click()
  164.             # 搜索关联数据
  165.             self.page.get_by_placeholder("搜索", exact=True).locator("visible=true").fill(relation_data_name)
  166.             self.sleep(1000)
  167.             self.page.locator('//table[@class="el-table__body"]/tbody/tr/td[1]/div/label').locator(
  168.                 "visible=true").click()
  169.             self.sure_on_dialog()
  170.         elif str(model) == "paas":
  171.             paas_relation_list = self.page.locator('//div[@class="relation-data-input__right"]').locator("visible=true")
  172.             paas_relation_list.nth(element_index).click()
  173.             # 搜索关联数据
  174.             self.page.get_by_placeholder("请输入内容", exact=True).locator("visible=true").fill(relation_data_name)
  175.             self.sleep(1000)
  176.             self.page.locator('//table[@class="el-table__body"]/tbody/tr/td[1]/div/label').locator(
  177.                 "visible=true").click()
  178.             self.sure_on_dialog()

  180.     # 非nvwa业务模块的关联数据选择
  181.     def set_not_nvwa_relation_data(self, element_index, relation_data_name):
  182.         relation_list = self.page.locator('//div[@class="field-input-block__suffix"]').locator("visible=true")
  183.         relation_list.nth(element_index).click()
  184.         # 搜索关联数据
  185.         self.page.get_by_placeholder("搜索", exact=True).locator("visible=true").fill(relation_data_name)
  186.         self.sleep(1000)
  187.         self.page.locator('//table[@class="el-table__body"]/tbody/tr/td[1]/div/span/label').locator(
  188.             "visible=true").click()
  189.         self.sure_on_dialog()

  191.     # 在列表全选后进行批量删除/彻底删除
  192.     def batch_del_on_list(self, batch_action_name):
  193.         # 列表页全选
  194.         self.page.locator('#select-all').locator("visible=true").click()
  195.         self.click_button(batch_action_name)
  196.         self.sure_on_dialog()

  198.     # 在系统的对话框中点击确定
  199.     def sure_on_dialog(self):
  200.         self.click_button("确定")
  201.         self.sleep(1000)

  203.     # 切换详情页tab
  204.     def switch_tab(self, tab_name):
  205.         self.sleep(1000)
  206.         tab_list = self.page.locator('//div[@role="tablist"]').locator('//div[@role="tab"]').locator(
  207.             "visible=true").all()
  208.         for tab in tab_list:
  209.             if str(tab.inner_text()).__contains__(tab_name):
  210.                 tab.click()
  211.                 self.sleep(1000)
  212.                 break
  213.             else:
  214.                 continue

  216.     # 获取容器内的文本值
  217.     def get_inner_text_on_list(self, data_key_name):
  218.         # 根据列表页的主键获取一行数据的文本值(返回的是str，也是奇葩)
  219.         text_list = self.page.get_by_role("row", name=data_key_name).locator("visible=true").inner_text()
  220.         return text_list

  222.     # 获取基本信息栏容器内的文本值
  223.     def get_inner_text_on_basic(self):
  224.         basic_text = self.page.locator("div.base-detail__bottom--left > form").locator("visible=true").inner_text()
  225.         return basic_text

  227.     # 获取单据详情页-负责团队tab信息
  228.     def get_sales_team_info(self):
  229.         team_text = self.page.locator('//div[@class="sale-team-detail__body"]').locator("visible=true").inner_text()
  230.         return team_text

  232.     # 获取tab栏下的内容 model分为base和more分别对应基本tab和更多tab
  233.     def get_inner_text_of_tab(self, model, tab_name):
  234.         if str(model) == "base":
  235.             self.switch_tab(tab_name)
  236.         elif str(model) == "more":
  237.             self.view_more_tab_on_detail(tab_name)
  238.         else:
  239.             pass
  240.         # 获取tab栏下的inner-text
  241.         tab_context = self.page.locator('//div[@class="detail-tab-containt"]').locator("visible=true").inner_text()
  242.         return tab_context

  244.     # 获取编辑页的inner-text
  245.     def get_inner_text_of_update(self):
  246.         update_page_text = self.page.locator('//div[@class="edit-dialog__content"]').locator(
  247.             "visible=true").inner_text()
  248.         return update_page_text

  250.     # 判断新建/编辑/删除成功
  251.     def assert_action_success(self):
  252.         action_tips_list = self.page.locator('//p[@class="el-message__content"]').locator("visible=true")
  253.         expect(action_tips_list.nth(0)).to_contain_text("成功")
  254. </font>
复制代码
测试用例：
考虑到实际的业务场景，笔者在该项目里并没有封装具体的页面而是封装好了base通用操作操作后直接使用了，如果读者朋友们有需要可以自行封装页面的操作。
ding_prod_web是具体的UI自动化测试用例的目录，具体的结构如下图。


[attach]148050[/attach]


2.8 集成到Jenkins
在Jenkins里配置自由风格的Job


[attach]148051[/attach]

构建步骤是执行sh
  1. <font face="微软雅黑" size="3">python3 -m pytest /Users/sunnysky/PythonProj/PlayWrightWeb/ding_prod_web --alluredir=allure-results</font>
复制代码
构建后的操作配置为AllureReport,以下是生成的Allure报告
[attach]148052[/attach]
三：展望未来
人工智能技术将对自动化测试产生深远的影响。人工智能技术通过大数据、AI和机器学习，机器将学会如何测试；这将对自动化测试进一步提升测试的有效性。自动化测试的自愈技术、大数据预测、图象识别等技术，将使得测试更加智能化、精准化。
结合了LLM的AI框架开始小荷才露尖尖角：https://github.com/Skyvern-AI/skyvern。
作为测试人员，我们需要不断学习新技术，适应新变化，以确保我们的测试工作能够为软件质量提供坚实的保障。
希望我的分享能为大家带来一些启发和帮助。让我们共同期待自动化测试技术更加美好的未来！






欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2