使用Playwright的selector方法快速定位网页元素(CSS选择器)

pytest-playwright 是一个用于在 Python 中使用 Playwright 进行自动化测试的工具。它结合了 Pytest 测试框架和 Playwright 浏览器自动化工具，为您提供了在编写和执行自动化测试时的便利性和灵活性。

通过 pytest-playwright，您可以编写基于 Pytest 的测试用例，使用 Playwright 提供的功能来进行浏览器自动化测试。这样可以让您利用 Pytest 的丰富功能和易用性，结合 Playwright 的强大自动化能力，来进行端到端的网页自动化测试。

一般来说，使用 pytest-playwright 进行测试的流程如下：

1. 安装 pytest-playwright 和 Playwright 相关的依赖。pip install pytest-playwright 
   playwright install 安装浏览器
2. 编写基于 Pytest 的测试用例，利用 pytest-playwright 提供的功能来进行浏览器自动化测试。
3. 运行测试用例，观察测试结果并进行必要的调试和修复。

以下是 pytest-playwright 提供的一些特性：

• Fixture 支持：pytest-playwright 提供了一些 Pytest fixture，以便在测试用例中使用 Playwright 实例。
• 参数化测试：可以方便地使用 Pytest 的参数化功能结合 Playwright 进行测试。
• 截图和视频录制：可以方便地使用 Playwright 提供的截图和视频录制功能来辅助测试。

# 当使用 Playwright 中的 selector() 方法执行 CSS 选择器查询时，可以传递特定的 CSS 选择器作为参数，
# 该选择器将用于在页面上选择符合条件的元素以下是对 selector() 方法用于执行 CSS 选择器查询的总结归纳：
# 基本选择器：
# 选择所有段落元素：selector('p')
# 选择具有 "example" 类的元素：selector('.example')
# 选择 id 为 "header" 的元素：selector('#header')

# 组合选择器：
# 选择所有 <div> 元素且具有 "container" 类的元素：selector('div.container')
# 选择所有 <a> 和 <button> 元素：selector('a, button')
# 选择类为 "list" 的元素内部的所有 <li> 元素：selector('.list > li')

# 属性选择器：
# selector('tagname[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的指定标签元素。
# 您可以将 tagname 替换为实际的标签名称，将 attribute 替换为要匹配的属性名称，将 value 替换为要匹配的属性值。
# selector('input[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的 <input> 元素
# selector('input[type="text"]')， 选择具有 type="text" 属性的 <input> 元素 

# 选择所有 href 属性值以 "https" 开头的链接元素：selector('a[href^="https"]')
# 选择所有 data-custom 属性值为 "value" 的元素：selector('[data-custom="value"]')

# 选择属性值以特定字符串开头的元素：selector('[attribute^="value"]')
# 例如：选择所有 href 属性值以 "https" 开头的链接元素：selector('a[href^="https"]')

# 选择属性值以特定字符串结尾的元素：selector('[attribute$="value"]')
# 例如：选择所有 src 属性值以 ".jpg" 结尾的图片元素：selector('img[src$=".jpg"]')

# 选择属性值包含特定字符串的元素：selector('[attribute*="value"]')
# 例如：选择所有 class 属性值包含 "active" 的元素：selector('.active')

# selector('[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的任何元素。
# <button data-testid="submit-button">Submit</button>
# selector('[data-testid="submit-button"]') 

# 通过传递适当的 CSS 选择器给 selector() 方法，可以在页面上准确定位到所需的元素，并进一步操作这些元素。
# 这种灵活性使得在使用 Playwright 进行 Web 自动化时能够更加高效地操作页面上的元素。

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto('https://www.hao123.com/')

        # 等待搜索框元素可见
        search_input = await page.wait_for_selector('input[data-hook="searchInput"]')
        # 提取https://www.hao123.com/页面的搜索框input
        # <input data-hook="searchSubmit" alog-action="search" class="g-cp submitInput button-hook s_btn" type="submit" value="百度一下"></div>
        # <input data-hook="searchInput" placeholder="" name="word" value="" class="textInput input-hook" type="text" autocomplete="off">
        
        if search_input:
            # 在搜索框中输入关键词
            await search_input.type('Playwright')

            # 查找并点击搜索按钮
            search_button = await page.query_selector('input[data-hook="searchSubmit"]')
            if search_button:
                await search_button.click()
                print('Clicked the search button!')
            else:
                print('Search button not found!')
        else:
            print('Search input element not found!')

        # 等待一段时间，以便查看搜索结果页面
        await asyncio.sleep(5)

        await browser.close()

asyncio.run(main())



# 当使用 Playwright 中的 selector() 方法执行 CSS 选择器查询时，可以传递特定的 CSS 选择器作为参数，
# 该选择器将用于在页面上选择符合条件的元素以下是对 selector() 方法用于执行 CSS 选择器查询的总结归纳：
# 基本选择器：
# 选择所有段落元素：selector('p')
# 选择具有 "example" 类的元素：selector('.example')
# 选择 id 为 "header" 的元素：selector('#header')

# 组合选择器：
# 选择所有 <div> 元素且具有 "container" 类的元素：selector('div.container')
# 选择所有 <a> 和 <button> 元素：selector('a, button')
# 选择类为 "list" 的元素内部的所有 <li> 元素：selector('.list > li')

# 属性选择器：
# selector('tagname[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的指定标签元素。
# 您可以将 tagname 替换为实际的标签名称，将 attribute 替换为要匹配的属性名称，将 value 替换为要匹配的属性值。
# 选择所有具有 type 属性的输入元素：selector('input[type]')
# selector('input[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的 <input> 元素
# selector('input[type="text"]')， 选择具有 type="text" 属性的 <input> 元素 

# 选择所有 href 属性值以 "https" 开头的链接元素：selector('a[href^="https"]')
# 选择所有 data-custom 属性值为 "value" 的元素：selector('[data-custom="value"]')

# 选择所有具有特定属性的元素：selector('[attribute]')
# 例如：选择所有具有 type 属性的输入元素：selector('input[type]')
# 选择属性值以特定字符串开头的元素：selector('[attribute^="value"]')
# 例如：选择所有 href 属性值以 "https" 开头的链接元素：selector('a[href^="https"]')

# 选择属性值以特定字符串结尾的元素：selector('[attribute$="value"]')
# 例如：选择所有 src 属性值以 ".jpg" 结尾的图片元素：selector('img[src$=".jpg"]')

# 选择属性值包含特定字符串的元素：selector('[attribute*="value"]')
# 例如：选择所有 class 属性值包含 "active" 的元素：selector('.active')

# selector('[attribute="value"]') 这个选择器的意思是选择具有特定属性和值的任何元素。
# <button data-testid="submit-button">Submit</button>
# selector('[data-testid="submit-button"]') 

# 通过传递适当的 CSS 选择器给 selector() 方法，可以在页面上准确定位到所需的元素，并进一步操作这些元素。
# 这种灵活性使得在使用 Playwright 进行 Web 自动化时能够更加高效地操作页面上的元素。