在上一章中，我们已经介绍了如何使用 Playwright 来获取浏览器中的页面。然而，一张典型的网页中包含了众多的视觉元素，例如输入框、按钮、图片和文字链接等等。
为了使用 Playwright 自动地操作浏览器，我们需要告诉它如何以编程的方式在 Web 页面上找到特定的元素或一组元素，并模拟用户对这些元素的操作。.
HTML，DOM 和 CSS
在此之前，我们需要先打好基础。让我们来谈谈 HTML、DOM 和 CSS。HTML 是一种用于创建 Web 页面的标记语言，它描述了页面的结构和内容。而 DOM（文档对象模型）是一种将 HTML 文档表示为对象的方式，使得开发人员可以轻松地访问和操作页面的元素。最后，CSS（层叠样式表）则用于定义页面的外观和样式。
深入了解 HTML、DOM 和 CSS 对于浏览器自动化来说至关重要。通过了解这些技术，我们可以更好地理解页面的结构和元素的属性，从而更轻松地使用 Playwright 来进行自动化操作。
HTML
HTML是一种用于描述网页结构的语言，它由一系列的元素组成，每个元素都有自己的标签。在HTML中有很多种元素类型，但是我们可以只了解一些常用的元素类型。
首先，每个HTML文档都包含在元素中。其中元素有两个子元素、。在元素中，我们可以包含脚本、指示浏览器在何处可以找到样式表、提供元信息等等。而页面本身将包含在元素中。下面是一个简单的示例：
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
其次，文本元素用于显示文本，最常见的文本元素是 p 元素，表示一个段落。此外，span元素帮助对段落中的部分文本进行样式设置。同时，label元素用于表示表单中的标签，可以将文本和输入框关联起来。
输入元素用于接收用户输入，最常见的输入元素是 input 元素，它可以接收文本、数字、密码、日期、时间、颜色等等，具体取决于type的值。例如，下面这个输入框接收文本：
<input type="text">
我们还有用于下拉列表的 select 元素和表示下拉列表项的 option 元素。同时，a 元素也被称为链接，它的设计目的是把你带到另一个页面，但现在也常用于触发页面内的操作。
每个元素都有自己的属性，例如百度首页的搜索按钮对应的代码如下：
<input type="submit" id="su" value="百度一下" class="bg s_btn">
这段代码中，input 标签中包含了type、id、value和class属性的定义。其中，type属性定义了输入元素的类型，id属性定义了输入元素的唯一标识，value属性定义了输入元素的值，class属性定义了输入元素的样式类。
DOM
DOM（文档对象模型）是一种平台和编程语言无关的接口，用于描述 HTML 文档的结构并提供编程语言访问和操作这些元素的方法。通过 DOM，JavaScript 脚本可以轻松访问和修改页面中的所有元素，如按钮、文本框等。
作为自动化测试工程师，我们同样需要掌握 DOM 的知识。例如，在前面章节中，我们提到百度首页的搜索按钮对应有一个 id 属性，因此，我们可以使用 document.getElementById('su') 在 JavaScript 中获取该元素。
除了 getElementById，我们还会经常使用 querySelector 和 querySelectorAll 函数。前者返回文档中匹配指定 CSS 选择器的第一个元素，后者则返回匹配指定 CSS 选择器的所有元素列表。
在学习 DOM 之前，我们需要了解 CSS 选择器的用法，这将有助于我们更好地使用 DOM 进行元素定位和操作。
CSS 选择器
CSS 选择器是一种用于从 HTML 文档中查找特定元素的规则。在 Playwright 中，我们可以使用这些选择器来查找元素并与之交互。
除了 id 选择器外，还有许多其他的选择器。例如，元素选择器，如 h1,p,a,span 等等，可以用来选择特定类型的元素。类选择器，如 .s_btn，可以用于选择具有特定类名的元素。属性选择器，如 [type="text"]，则可以选择具有特定属性及其值的元素。
一个选择器也可以与其他选择器组合使用，以便更准确地选择元素。例如，input[type="text"].s_ipt 可以同时选择具有 type 属性值为 text 且 class 属性包含 .s_ipt 的元素。
掌握这些选择器的知识，可以让我们在 Playwright 中更轻松地定位和交互特定的元素。
Locator（定位器）
在 Playwright 中，我们使用定位器来查找和匹配页面上的元素。通过使用page.Locator(selector, options)方法，我们可以创建定位器。这个方法包含一个选择器，它描述了如何在页面中查找元素。
按 id 查找
其中，按照元素的 id 进行查找是最简单、最安全的方法。因为在 HTML 规范中，id 属性必须是唯一的，这就像身份证号一样具有很强的唯一性。因此，使用 id 定位元素不容易受到 Web 应用程序更改的影响，例如，开发人员可能会更改样式，但不太可能更改 id。
以下是一个使用 id 定位器的例子：
page.Locator("#su")
除此之外，我们还可以使用属性选择器的速记方式来定位元素：
page.Locator("id=su")
按文本查找
通常情况下，元素的文本内容是唯一的，因此使用文本来定位元素也是一种很好的方式。举个例子，如果你要查找百度首页的“hao123”链接，可以使用如下代码：
page.Locator("text=hao123")
文本选择器还可以简写为以引号开头和结尾的选择器，例如：
page.Locator("'hao123'")
需要注意的是，文本查找默认是不区分大小写的，并且会搜索子字符串。因此，下面的代码都可以找到“hao123”链接：
page.Locator("text=Hao123")
page.Locator("text=aO12")
但是这样也会带来一些问题。比如，如果你想使用 text=百度一下 查找“百度一下”按钮：
<input type="submit" id="su" value="百度一下" class="bg s_btn">
你会发现，代码实际上会查找到两个元素，因为页面上还有一个 div 元素，它的文本内容也包含“百度一下”：
<div class="login-info">百度一下生活更好</div>
如果你想要精确匹配，可以使用类似 JavaScript 的正则表达式进行全匹配。例如，以“ha”开头并以“23”结尾的文本：
page.Locator("text=/^ha\\w+23$/i")
利用正则表达式，你可以实现更多文本查找的方式。这样就可以更加精准地定位元素，避免出现意外情况。
按 CSS 查找
使用 CSS 选择器是 Playwright 最常用的方法之一，它是一种强大的工具，可以帮助你定位页面上的任何元素。例如，如果你要找到百度首页的“百度一下”按钮，只需使用以下代码：
page.Locator("input[value='百度一下']")
除了直接查找元素，你还可以将 CSS 选择器和文本选择器组合在一起使用，以更精确地定位元素。例如，以下代码可以查找一个 input 元素并包含指定文本：
page.Locator("input:text('百度')")
按 XPath 查找
XPath（XML Path Language）是一种用于确定XML文档中某部分位置的语言，同样适用于定位HTML中某个元素的位置。
虽然XPath表达式相对于CSS选择器来说更为复杂，但是下面我们介绍一种更容易生成XPath表达式的方法。
在浏览器中定位元素
在浏览器中，我们可以通过鼠标右键单击某个元素，然后在弹出的菜单中选择“检查”来定位元素。浏览器会在页面上高亮显示该元素，并且在开发者工具的“元素”面板中显示该元素的HTML代码。通过鼠标悬停在任意HTML代码上，可以查看该元素在页面上的位置。使用这种方式，可以定位到页面上的任何一个元素。
现在，选中要查找的元素，然后在“元素”面板中右键单击该元素，选择“复制”>“复制XPath”，就可以复制该元素的XPath表达式。使用这个表达式，可以在 Playwright 中快速定位元素，如下所示：
page.Locator("//*[@id=\"su\"]"),
总结
提高 Playwright 自动化程序的可靠性的关键是选择器的选择。为了减少维护负担，选择器的选择是非常重要的。下面介绍一些选择器的最佳实践。
首先，如果元素具有 id 属性，那么最好使用 id 选择器来定位元素。因为 id 选择器的优先级最高，而且通常只会在页面中出现一次，因此 id 选择器的可靠性也是最高的。
其次，优先使用 CSS 选择器。CSS 选择器的可读性和可维护性比 XPath 要好，因此优先使用 CSS 选择器。
其次，尽量使用简单的选择器。如果可以使用简单的选择器来定位元素，那么就不要使用复杂的选择器，因为复杂的选择器更容易受到页面结构的影响，导致自动化程序出现问题。
最后，尽量避免使用相对选择器。相对选择器是指在当前元素的基础上再进行定位的选择器，例如：page.Locator("div > input")。相对选择器的可读性和可维护性比较差，而且容易受到页面结构的影响，因此尽量避免使用相对选择器。
总之，选择器的选择对于 Playwright 自动化程序的可靠性至关重要。掌握选择器的最佳实践可以使得自动化程序更加稳定和可维护。
在下一章中，我们将介绍如何在 Playwright 中与元素交互，帮助读者更好地理解和应用 Playwright。
