Playwright爬虫xpath获取技巧

示例一

<button class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-fullWidth css-wxfct4" tabindex="0" type="submit" id=":r6:"><span class="MuiLoadingButton-label css-oz8hdd"><span>确认</span></span><span class="MuiTouchRipple-root css-4mb1j7"></span></button>

1. 通过 id 属性获取 XPath

如果 id 是唯一的，可以直接通过 id 来定位该按钮：

//button[@id=':r6:']

这个 XPath 会选择 id=":r6:" 的 <button> 元素。

2. 通过 class 属性获取 XPath

由于按钮有多个类名，可以使用类名进行定位。如果你想选择包含特定类名的按钮，可以使用 contains() 方法：

//button[contains(@class, 'MuiButton-containedPrimary') and contains(@class, 'MuiButton-sizeLarge')]

这个 XPath 会选择同时包含 MuiButton-containedPrimary 和 MuiButton-sizeLarge 类名的按钮。

3. 通过按钮文本（"确认"）获取 XPath

如果你希望通过按钮文本内容来定位，可以使用以下 XPath：

//button[.//span[text()='确认']]

这个 XPath 会选择按钮内部包含 <span> 标签且文本内容为 "确认" 的 <button> 元素。

4. 通过 type 属性获取 XPath

如果你想通过 type 属性来定位：

//button[@type='submit']

这个 XPath 会选择 type="submit" 的 <button> 元素。

5. 综合选择（通过 id、class 和按钮文本）

为了确保定位准确，你可以通过多个属性来组合选择。例如：

//button[@id=':r6:' and contains(@class, 'MuiButton-containedPrimary') and .//span[text()='确认']]

示例二

<div class="MuiStack-root css-1w7p9qt" variant="borderless"><div class="MuiStack-root css-1ilan5m"><img src="/images/flags/aq.svg" style="display: block; width: 30px; height: 30px;"></div><i color="inherit" size="20" class="iconfont icon-arrow-down-simple css-1k924bf"></i></div>

1. 定位图片 (<img>) 元素

图片 (<img>) 的 src 属性是唯一的，因此你可以通过 src 来定位该图片：

//img[@src='/images/flags/aq.svg']

这个 XPath 会选中 src='/images/flags/aq.svg' 的 <img> 元素。

2. 通过父元素定位图片

如果你想定位图片 <img> 元素，并且考虑到它的父元素 <div> 类名为 MuiStack-root css-1ilan5m，可以通过父元素来精确定位：

//div[@class='MuiStack-root css-1ilan5m']//img[@src='/images/flags/aq.svg']

这个 XPath 会在 class='MuiStack-root css-1ilan5m' 的父元素下，选择 src='/images/flags/aq.svg' 的图片元素。

3. 定位图标元素 (<i>)

你可以通过图标的 class 属性来定位图标元素：

//i[@class='iconfont icon-arrow-down-simple css-1k924bf']

这个 XPath 会选择 class='iconfont icon-arrow-down-simple css-1k924bf' 的 <i> 元素。

4. 通过整个父元素定位图标

如果你希望通过父容器来定位图标，可以结合父元素的类名来选择图标：

//div[@class='MuiStack-root css-1w7p9qt']//i[@class='iconfont icon-arrow-down-simple css-1k924bf']

这个 XPath 会选中位于 class='MuiStack-root css-1w7p9qt' 的父元素下的图标 <i> 元素。

5. 组合父元素和图片的定位

如果你想要通过组合父元素和图片的类名来定位图片，可以使用以下 XPath：

//div[@class='MuiStack-root css-1ilan5m']//img[@style='display: block; width: 30px; height: 30px;']

示例三

<p class="MuiTypography-root MuiTypography-body1 css-g6tbiw">澳大利亚</p>

这是一个包含文本 "澳大利亚" 的 <p> 元素，并且它具有多个 class 属性值。以下是几种可能的 XPath 表达式来定位该 <p> 元素：

1. 通过 class 属性定位

由于该 <p> 元素具有多个类名，你可以通过组合这些类名来精确定位它：

//p[@class='MuiTypography-root MuiTypography-body1 css-g6tbiw']

该 XPath 会选中 class='MuiTypography-root MuiTypography-body1 css-g6tbiw' 的 <p> 元素。

2. 通过文本内容定位

如果你想根据元素的文本内容来定位该 <p> 元素，可以使用以下 XPath：

//p[text()='澳大利亚']

这个 XPath 会选中文本内容为 "澳大利亚" 的 <p> 元素。

3. 通过部分类名匹配定位

有时类名可能会发生变化，但可以通过部分类名匹配来定位元素。例如，使用 contains() 函数来匹配类名：

//p[contains(@class, 'MuiTypography-root') and contains(@class, 'css-g6tbiw')]

这个 XPath 会选中 class 属性包含 MuiTypography-root 和 css-g6tbiw 的 <p> 元素。

4. 通过父元素定位

如果该 <p> 元素位于某个特定的父元素内，你也可以通过父元素来定位。例如，假设它位于某个特定 div 中：

//div//p[text()='澳大利亚']

这个 XPath 会选中父元素是 <div> 的情况下，文本内容为 "澳大利亚" 的 <p> 元素。

5. 通过多个类名精确定位

//p[@class='MuiTypography-root MuiTypography-body1 css-g6tbiw']

示例四

<span class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary SendCodeButton css-7ans5j" tabindex="0" role="button">发送验证码</span>

我们可以通过多种方式来定位该元素。以下是一些可能的 XPath 表达式：

1. 通过文本内容定位

这是最简单的方法，如果你只关心元素的文本内容，可以使用以下 XPath：

//span[text()='发送验证码']

该 XPath 会选中文本内容为 "发送验证码" 的 <span> 元素。

2. 通过类名定位

由于该 <span> 元素有多个类名，你可以使用 @class 属性来定位该元素。由于类名较长且有重复部分，最好选择具有唯一性的类名，例如：

//span[contains(@class, 'SendCodeButton')]

此 XPath 会选中 class 属性中包含 "SendCodeButton" 的 <span> 元素。

3. 通过 role 属性定位

如果你想通过 role 属性来定位该元素，可以使用如下 XPath：

//span[@role='button' and text()='发送验证码']

这个 XPath 会选中 role='button' 且文本内容为 "发送验证码" 的 <span> 元素。

4. 通过 tabindex 属性定位

tabindex 属性通常用于指定页面的 tab 键顺序。你也可以使用它来定位元素：

//span[@tabindex='0' and text()='发送验证码']

该 XPath 会选中 tabindex='0' 且文本内容为 "发送验证码" 的 <span> 元素。

5. 通过类名的组合定位

由于类名包含多个唯一标识符，可以通过组合类名来精确定位该元素。例如，使用 contains() 函数来匹配部分类名：

//span[contains(@class, 'MuiButton-root') and contains(@class, 'MuiButton-textPrimary')]

该 XPath 会选中 class 属性中包含 MuiButton-root 和 MuiButton-textPrimary 的 <span> 元素。

6. 通过完整类名定位

如果类名的组合在页面中是唯一的，可以通过完全匹配类名来精确定位：

//span[@class='MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary SendCodeButton css-7ans5j']

这个 XPath 选中 class 属性完全匹配的 <span> 元素。

7. 通过多条件组合定位

你也可以组合多个属性来精确定位，例如结合 class、role 和 text 内容：

//span[contains(@class, 'MuiButton-root') and @role='button' and text()='发送验证码']

这个 XPath 会选中 class 中包含 MuiButton-root，role 为 button，并且文本为 "发送验证码" 的 <span> 元素。

示例五

<span class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-g6tbiw">短信</span>

我们可以通过多种方法来定位它，下面是一些可能的 XPath 表达式：

1. 通过文本内容定位

如果你只关心文本内容为 "短信" 的元素，可以使用以下 XPath：

//span[text()='短信']

这个 XPath 会选中文本内容为 "短信" 的 <span> 元素。

2. 通过类名定位

由于该 <span> 元素有多个类名，你可以使用 @class 属性来定位它。例如：

//span[contains(@class, 'MuiTypography-root') and contains(@class, 'MuiTypography-body1')]

这个 XPath 会选中 class 属性中包含 MuiTypography-root 和 MuiTypography-body1 的 <span> 元素。

3. 通过类名的组合定位

如果你想通过类名中的多个部分来精确定位该元素，可以结合类名：

//span[contains(@class, 'MuiTypography-root') and contains(@class, 'MuiListItemText-primary')]

此 XPath 会选中 class 属性中同时包含 MuiTypography-root 和 MuiListItemText-primary 的 <span> 元素。

4. 通过类名和文本内容结合定位

你也可以结合 class 属性和文本内容来定位该元素：

//span[contains(@class, 'MuiTypography-body1') and text()='短信']

这个 XPath 会选中 class 包含 MuiTypography-body1 且文本内容为 "短信" 的 <span> 元素。

5. 通过完整类名定位

如果类名在页面中是唯一的，可以使用完整的类名来精确定位：

//span[@class='MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-g6tbiw']

这个 XPath 会选中 class 属性完全匹配的 <span> 元素。

6. 通过 text() 和多个属性结合定位

你可以结合多个属性来精确定位，例如：

//span[@class='MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-g6tbiw' and text()='短信']

这个 XPath 会选中 class 完全匹配且文本为 "短信" 的 <span> 元素。