playwright-python 元素定位、frame處理（一）

浏覽器、

Browser contexts

、

frame

Playwright

可以同時啟動多個浏覽器（

chromium、Firefox、webkit

），每個浏覽器可以啟動多個

page

（在

Playwright

上稱作

Browser contexts

）

浏覽器

啟動浏覽器代碼樣例：

from playwright import sync_playwright

with sync_playwright() as p:
    # 可以選擇chromium、firefox和webkit
    browser_type = p.chromium
    # 運作chrome浏覽器，executablePath指定本地chrome安裝路徑
    # browser = browser_type.launch(headless=False,slowMo=50,executablePath=r"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
    browser = browser_type.launch(headless=False)
    page = browser.newPage()
    page.goto('https://www.baidu.com/')
    page.screenshot(path=f'example-{browser_type.name}.png')
    browser.close()
           

Browser contexts

同一個浏覽器啟動多個

page

，可以模拟多頁面的場景：

from playwright import sync_playwright

with sync_playwright() as p:
    browser_type = p.chromium
    browser = browser_type.launch(headless=False)
    context = browser.newContext()
    page1 = context.newPage()
    page1.goto('https://mail.163.com/')
    page1.screenshot(path=f'page1-{browser_type.name}.png')
    page2 = context.newPage()
    page2.goto("https://www.baidu.com/")
    page2.screenshot(path=f'page2-{browser_type.name}.png')
    context.close()
    browser.close()
           

Browser contexts

還可以模拟移動裝置：

from playwright import sync_playwright

with sync_playwright() as p:
    browser_type = p.chromium
    iphone_11 = p.devices['iPhone 11 Pro']
    browser = browser_type.launch(headless=False)
    context = browser.newContext(**iphone_11, permissions=['geolocation'], colorScheme='dark', locale='zh-CN')
    page = context.newPage()
    page.goto('https://mail.163.com/')
    page.screenshot(path=f'page2-{browser_type.name}.png')
    context.close()
    browser.close()
           

frame

處理frame，查找frame有三種方法：

1. frame

   的

   name

   屬性

2. frame

   的

   URL

3. 通過其他的任何的

   selector

from playwright import sync_playwright

with sync_playwright() as p:
    browser_type = p.chromium
    browser = browser_type.launch(headless=False)
    page = browser.newPage()
    page.goto('https://mail.163.com/')
    # 通過selector、name、URL
    login_frame = page.querySelector("[id^='x-URS-iframe']").contentFrame()
    # login_frame = page.querySelector("#loginDiv>iframe").contentFrame()
    # login_frame2 = page.frame("name").contentFrame()
    # login_frame3 = page.frame("URL").contentFrame()
    # 檢視所有的frames
    print(page.frames)
    login_frame.fill("input[name='email']", "test123")
    login_frame.fill("input[name='password']", "1234")
    login_frame.click("#dologin")
    page.screenshot(path=f'example-{browser_type.name}.png')
    browser.close()
           

元素選擇器（元素查找）

文法

Playwright

可以使用

CSS選擇器

、

XPath選擇器

、

HTML屬性

(如

id、data-test-id

，甚至

文本内容

)來搜尋元素。隻需直接使用即可，可以自動探測

簡寫

1. 選擇器以

   //

   或者

   ..

   開頭，則會預設為是

   xpath=selector

   • 例子：

     page.click('//html')

     可轉換為

     page.click('xpath=//html')

2. 選擇器開始和結束以引号（

   "

   或者

   '

   ），則預設為

   text=selector

   • 例子：

     page.click(' "foo" ')

     可轉換為

     page.click('text="foo"')

3. 其他的預設為是

   css=selector

   • 例子：

     page.click('div')

     可轉換為

     page.click('css=div')

鍊式選擇器

選擇器可以與

>>

組合使用，例如

selector1 >> selector2 >> selectors3

。當選擇器被連結時，下一個選擇器會相對于前一個選擇器的結果進行查詢。

例如：

等同于：

css=article >> text=Hello

查找文本為Hello的 article 元素；

*css=article >> text=Hello

查找包含文本Hello的 article 元素

最佳實踐

以下隻是寫出了部分用法，詳情參考

• 使用

  data-test-id

  ：

• CSS 和 XPath

  ，

  page.click('div')
  page.click('//html/body/div')
  # 明确指定類型
  page.click('css=div')
  page.click('xpath=//html/body/div')
  # 點選#free-month-promo元素内文本為“Sign Up”的元素
  page.click('#free-month-promo >> text=Sign Up')
  
  page.fill('css=[placeholder="Search GitHub"]')
  page.fill('[placeholder="Search GitHub"]') # 簡寫
             

• 通過文本子字元串查找

  page.click('text="Login"')
  page.click('"Login"'); # 簡寫
             

• 擷取某元素内的所有文本

  print(page.evalOnSelector('.headerLogo', """e => e.textContent"""))
  print(page.querySelector('.headerLogo').textContent())
             

• CSS

  擴充

  : visible

  # 點選第一個button
  page.click('button')
  # 點選第一個可視的button，如果有其他不可視的，則會忽略他們
  page.click('button:visible')
             

• CSS

  擴充

  : text

  • :text("substring")

    當元素的文本在某處包含"substring"時進行比對。比對是不區分大小寫的。比對還對空格進行規範化，例如，它将多個空格轉換為一個空格，換行并忽略開頭和結尾的空格

  • :text-is("string")

    當元素的文本等于"string"時進行比對。比對不區分大小寫，并且對空格規格化

  • button:text("Sign in")

    文本選擇器可以與正常

    CSS

    相結合

  • :text-matches("[+-]?\\d+")

    根據正規表達式比對文本。注意，像反斜杠\，引号"，方括号[]和更多的特殊字元應該被轉義。

  • :text-matches("value", "i")

    使用指定的标記比對正規表達式的文本

  page.click('button:text("Sign in")')
  page.querySelector(':text("163網易郵箱")').textContent()
             

參考

• https://github.com/microsoft/playwright-python
• https://playwright.dev/docs/why-playwright