說明：playwright可以用于UI自動(dòng)化測(cè)試捕传，有方便的錄制插件，錄制出來的腳本準(zhǔn)確度也比較高扩劝，也比較方便調(diào)試修改庸论。下面以直接使用者的角度介紹下playwright如何快速上手使用

一、基于python環(huán)境安裝playwright

說明：安裝playwright插件今野，注意要先安裝python環(huán)境

pip install playwright

二葡公、下載瀏覽器內(nèi)核驅(qū)動(dòng)

說明：下載瀏覽器內(nèi)核，錄制程序使用

playwright install

三条霜、啟動(dòng)錄制

playwright codegen https://baidu.con

四催什、流程說明

說明：直接把錄制生成的代碼復(fù)制到python編輯器里面就能運(yùn)行梆掸，下面我們說明下各代碼含義

再調(diào)試下錄制生成的代碼似扔，確保每個(gè)元素能正常獲取到，特別是部分元素是通過id獲取的缝驳，這種就需要手動(dòng)修改腳本

1.生成瀏覽器驅(qū)動(dòng)

browser = playwright.chromium.launch(headless=False)

說明：可支持的瀏覽器有'chromium',?'webkit'?or?'firefox'拆内，方法里面的參數(shù)支持設(shè)置是否是無頭模式旋圆、窗口大小、是否代理等等

2.生成瀏覽器上下文（context）對(duì)象

context = browser.new_context(no_viewport=True)

說明：創(chuàng)建context對(duì)象麸恍，context之間是相互隔離的灵巧，可以理解為輕量級(jí)的瀏覽器實(shí)例.如需要不同用戶登錄同一個(gè)網(wǎng)頁搀矫，不需要?jiǎng)?chuàng)建多個(gè)瀏覽器實(shí)例，只需要?jiǎng)?chuàng)建多個(gè)context即可刻肄。

3.生成瀏覽器頁面page

page = context.new_page()

說明：page就相當(dāng)于瀏覽器的選項(xiàng)卡瓤球，一般在瀏覽器context上創(chuàng)建，后續(xù)打開網(wǎng)頁 敏弃、定位元素卦羡、頁面操作都是基于page

4.打開一個(gè)指定url地址

page.goto("https://www.baidu.com")

五、相關(guān)操作方法說明

1.常用基本方法

查找元素

page.locator():元素定位器

page.get_by_text("文本內(nèi)容"):查找文本匹配的元素

page.get_by_role("button"):get_by_role是一個(gè)查找頁面元素的方法,代表要查找的元素的角色或類型

模擬點(diǎn)擊相關(guān)

# 點(diǎn)擊

page.get_by_role("button").click()

# 雙擊

page.get_by_text("Item").dblclick()

# 右擊

page.get_by_text("Item").click(button="right")

# Shift + 點(diǎn)擊

page.get_by_text("Item").click(modifiers=["Shift"])

# 鼠標(biāo)懸停在元素上

page.get_by_text("Item").hover()

# 點(diǎn)擊左上角

page.get_by_text("Item").click(position={ "x": 0, "y": 0})

模擬輸入

fill():輸入文字

type():一個(gè)字符一個(gè)字符地輸入字段麦到，就好像它是一個(gè)使用locator.type()的真實(shí)鍵盤的用戶绿饵。

獲取元素文本

inner_text():獲取元素的文本內(nèi)容

等待時(shí)間

page.wait_for_timeout(2000):強(qiáng)制等待2秒

檢查元素是否找到

disable_button is not None? ?找到標(biāo)識(shí)true，未找到為false

模擬鍵盤按鈕

# 按Enter鍵

page.get_by_text("Submit").press("Enter")

# 在鍵盤上按$符號(hào)

page.get_by_role("textbox").press("$")

文件上傳

page.set_input_files("input[type=file]", r'E:\基礎(chǔ)內(nèi)容\POC環(huán)境相關(guān)文檔\合同文檔合集\信托合同.pdf')

2.匯總

page.locator():playwright的核心功能之一瓶颠，元素定位器

query_selector()：返回第一個(gè)匹配給定CSS選擇器的元素拟赊。如果找不到匹配的元素，則返回None粹淋。

query_selector_all():用于在頁面中查詢匹配指定CSS選擇器的所有元素要门，如果沒有找到匹配的元素，則返回空列表廓啊。

page.get_by_text()通過文本內(nèi)容定位。

page.get_by_label()通過關(guān)聯(lián)標(biāo)簽的文本定位表單控件封豪。

page.get_by_placeholder()按占位符定位谴轮。

page.get_by_title()通過標(biāo)題屬性定位元素。

page.get_by_role()通過顯式和隱式可訪問性屬性進(jìn)行定位吹埠。

page.get_by_alt_text()通過替代文本定位元素第步，通常是圖像。

page.get_by_test_id()根據(jù)data-testid屬性定位元素(可以配置其他屬性)缘琅。

has_text()查找子代或后代所有包含對(duì)應(yīng)文本的,相反的也有has_not_text()

inner_text():獲取元素的文本內(nèi)容

click():點(diǎn)擊事件

fill("XXX"):寫入內(nèi)容

first.click():第一個(gè)元素

nth(1).click():下標(biāo)為1的元素粘都，從0開始

page.set_input_files("input[type=file]", r'E:\基礎(chǔ)內(nèi)容\POC環(huán)境相關(guān)文檔\合同文檔合集\信托合同.pdf'):文件上傳

reload():用于重新加載當(dāng)前頁面。這個(gè)方法會(huì)發(fā)送一個(gè)瀏覽器級(jí)別的“頁面刷新”請(qǐng)求刷袍，清除并重新加載整個(gè)頁面的內(nèi)容翩隧。

六、詳細(xì)說明

1.launch

launch()方法是Playwright庫中用于啟動(dòng)瀏覽器的函數(shù)呻纹。它接受一個(gè)可選參數(shù)堆生，該參數(shù)可以是一個(gè)字典，用于配置瀏覽器的選項(xiàng)雷酪。

下面是一些常用的launch()方法的選項(xiàng)：

headless: 布爾值淑仆，默認(rèn)為True。如果設(shè)置為False哥力，則會(huì)在啟動(dòng)瀏覽器時(shí)顯示瀏覽器窗口蔗怠。

slow_mo: 浮點(diǎn)數(shù)，默認(rèn)為0。如果設(shè)置為大于0的值寞射，則會(huì)增加瀏覽器操作的延遲時(shí)間（單位為毫秒）渔工。

ignore_https_errors: 布爾值，默認(rèn)為False怠惶。如果設(shè)置為True涨缚，則在訪問HTTPS網(wǎng)站時(shí)不會(huì)檢查證書錯(cuò)誤。

viewport: 字典策治，用于指定瀏覽器窗口的大小和位置脓魏。例如：{'width': 800, 'height': 600}。

args: 列表通惫，用于傳遞給瀏覽器進(jìn)程的命令行參數(shù)茂翔。例如：['--disable-gpu']。

2.new_context

new_context()方法是Playwright庫中用于創(chuàng)建一個(gè)新的瀏覽器上下文的函數(shù)履腋。它接受一個(gè)可選參數(shù)珊燎，該參數(shù)可以是一個(gè)字典，用于配置瀏覽器上下文的選項(xiàng)遵湖。下面是一些常用的new_context()方法的選項(xiàng)：

user_agent: 字符串悔政，默認(rèn)為當(dāng)前瀏覽器的用戶代理字符串。如果設(shè)置為其他值延旧，則會(huì)使用指定的用戶代理字符串谋国。

viewport: 字典，用于指定瀏覽器窗口的大小和位置迁沫。例如：{'width': 800, 'height': 600}芦瘾。

accept_downloads: 布爾值，默認(rèn)為False集畅。如果設(shè)置為True近弟，則會(huì)在下載文件時(shí)自動(dòng)接受下載對(duì)話框。

record_har: 字典挺智，用于錄制HTTP請(qǐng)求和響應(yīng)數(shù)據(jù)祷愉。例如：{'path': '/tmp/har.har'}。

3.new_page

new_page()方法是Playwright庫中用于創(chuàng)建新的瀏覽器頁面的函數(shù)逃贝。下面是一些常用的new_page()方法的用法：

browser.new_page()創(chuàng)建一個(gè)新的瀏覽器頁面

page.goto('https://www.baidu.com')打開一個(gè)網(wǎng)頁

page.url獲取當(dāng)前頁面的URL

page.evaluate('() => document.title')在頁面上執(zhí)行JavaScript代碼

page.screenshot(path='screenshot.png')截取頁面的屏幕截圖

4.locator

locator()方法可以根據(jù)元素的CSS選擇器來查找谣辞。您可以使用各種CSS選擇器，包括但不限于：

標(biāo)簽名：例如?page.locator('button')

類名：例如?page.locator('.my-class')

ID：例如?page.locator('#my-id')

屬性：例如?page.locator('[data-testid="my-test-id"]')

文本內(nèi)容：例如?page.locator(':text("My Text")')

locator()方法支持所有的CSS選擇器沐扳，包括：

基本選擇器：例如div,?span,?.my-class,?#my-id等泥从。

屬性選擇器：例如[href],?[class="my-class"],?[data-my-attr="value"]等。

偽類選擇器：例如:hover,?:focus,?:first-child,?:last-of-type等沪摄。

結(jié)合選擇器：例如div.my-class,?div, span,?div > p,?div + p等躯嫉。

文本選擇器

page.click('text=登錄'):沒有加引號(hào)(單引號(hào)或者雙引號(hào))纱烘，模糊匹配，對(duì)大小寫不敏感

page.click('text="登錄"'):有引號(hào)祈餐，精確匹配擂啥，對(duì)大小寫敏感

比如：<article><div >Playwright</div></article>

page.locator(':has_text("Playwright")').click()

# 也可以這樣寫，指定標(biāo)簽

page.locator('article:has_text("Playwright")').click()

# 也可以這樣

page.locator(":text('Playwright')").click()

# 還可以這樣

page.locator('article:has'text=Playwright').click()

css選擇器

page.locator('button').click() # 根據(jù)標(biāo)簽

page.locator('#nav-bar .contact-us-item').click() # 通過id +class

page.locator('[data-test=login-button]').click() # 屬性定位

page.locator("[aria-label='Sign in']").click()

#css定位前面可以加個(gè)css=帆阳，但是不加也可以程序也會(huì)自動(dòng)匹配

Xpath 定位

page.locator("xpath=//button").click()

組合定位：text哺壶、css、xpath三者可以兩組合定位

page.locator("article:has-text('Playwright')").click()

page.locator("#nav-bar :text('Contact us')").click()

css+css組合定位

page.locator(".item-description:has(.item-promo-banner)").click()

Xpath + css 組合定位

page.fill('//div[@class="SignFlow-account"] >>css=[name="username"]',"0863")

xpath+xpath組合定位

page.fill('//div[@class="SignFlowInput"] >> //input[@name="password"]',"ma160065")

5. get_by

get_by_id: 通過元素的 id 屬性來查找元素蜒谤，例如：page.get_by_id("my-id")

get_by_name: 通過元素的 name 屬性來查找元素山宾，例如：page.get_by_name("my-name")

get_by_text: 通過元素的文本內(nèi)容來查找元素，例如：page.get_by_text("Submit")

get_by_title: 通過元素的 title 屬性來查找元素鳍徽，例如：page.get_by_title("my-title")

get_by_placeholder: 通過元素的 placeholder 屬性來查找元素资锰，例如：page.get_by_placeholder("my-placeholder")

get_by_selector: 通過 CSS 選擇器來查找元素，例如：page.get_by_selector("#submit-button")

get_by_xpath: 通過 XPath 表達(dá)式來查找元素阶祭，例如：page.get_by_xpath("http://div[@class='my-class']")

get_by_label: 根據(jù)label屬性值查找元素绷杜，類似于HTML中的label標(biāo)簽和對(duì)應(yīng)的for屬性。

get_by_role: 通過角色方式定位元素濒募，例如：page.get_by_role("button", name="Submit")

6.get_by_role

元素：<li class="el-menu-item" role="menuitem" tabindex="-1">隊(duì)列管理</li>

page.get_by_role("menuitem", name="隊(duì)列管理").click()

元素：<button class="el-button el-button--primary el-button--default mr-24px mb-12px" aria-disabled="false" type="button"><span>新增隊(duì)列</span></button>

page.get_by_role("button", name="新增隊(duì)列").click()

7.set_input_files

# 上傳文件

# 選擇單個(gè)文件

page.set_input_files("input[type=file]", r'E:\基礎(chǔ)內(nèi)容\POC環(huán)境相關(guān)文檔\合同文檔合集\信托合同.pdf')

page.get_by_label("Upload file").set_input_files('myfile.pdf')

# 選擇多個(gè)文件

page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt'])

# 刪除所有選中文件

page.get_by_label("Upload file").set_input_files([])

# 從內(nèi)存中上傳緩沖區(qū)

page.get_by_label("Upload file").set_input_files(

? ? files=[

? ? ? ? {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"}

? ? ],

)

# 處理動(dòng)態(tài)頁面上的焦點(diǎn)事件

page.get_by_label('password').focus()

# 拖拽元素

page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at"))