Selenium CSS定位方法詳解

一、概述

在自動化測試中，頁面元素的定位非常重要，而Selenium可以通過多種方式定位頁面元素，其中CSS選擇器定位方法是最為常用和靈活的一種。

二、基本CSS選擇器

在CSS選擇器中，基本選擇器主要包含標籤選擇器、類選擇器、ID選擇器以及子元素選擇器等。

1. 標籤選擇器

標籤選擇器使用HTML元素的標籤名進行選擇，如以下示例代碼：


<html>
   <head>
      ...
   </head>
   <body>
      <div>
         <p>Hello World!</p>
      </div>
   </body>
</html>

通過查找<p>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('p')

2. 類選擇器

類選擇器使用元素的類名進行選擇，用「.類名」表示，如以下示例代碼：


<div class="content">
   <p>Hello World!</p>
</div>

通過查找類名為「content」的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('.content')

3. ID選擇器

ID選擇器使用元素的ID屬性進行選擇，用「#ID名」表示，如以下示例代碼：


<div id="content">
   <p>Hello World!</p>
</div>

通過查找ID名為「content」的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('#content')

4. 子元素選擇器

子元素選擇器用「父元素>子元素」表示，可以選擇指定父元素下的直接子元素，如以下示例代碼：


<div class="parent">
   <div class="child">
      <p>Hello World!</p>
   </div>
</div>

通過查找class名為「parent」的<div>標籤下的class名為「child」的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('.parent > .child')

三、CSS屬性選擇器

CSS屬性選擇器使用HTML元素的屬性名稱和屬性值進行選擇，可以根據元素的屬性來選擇元素。

1. 含有指定屬性的元素

可使用「[屬性名]」表示，可選擇含有指定屬性的元素，如以下示例代碼：


<div class="content" data-id="123">
   <p>Hello World!</p>
</div>

通過查找含有data-id屬性的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('[data-id]')

2. 指定屬性值的元素

可使用「[屬性名=屬性值]」表示，可選擇屬性值為指定值的元素，如以下示例代碼：


<div class="content" data-id="123">
   <p>Hello World!</p>
</div>

通過查找data-id屬性值為「123」的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('[data-id="123"]')

3. 屬性值包含指定字元的元素

可使用「[屬性名*=字元]」表示，可選擇屬性值包含指定字元的元素，如以下示例代碼：


<div class="content" data-id="123abc">
   <p>Hello World!</p>
</div>

通過查找data-id屬性值包含「abc」的<div>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('[data-id*="abc"]')

四、CSS偽類選擇器

CSS偽類選擇器用於選擇一些沒有標籤類名或屬性的元素，但這些元素在特定情況下有特殊的狀態。

1. :hover偽類選擇器

:hover偽類選擇器用於滑鼠懸浮時的操作，如以下示例代碼：


<a href="#">Hover Me</a>

通過查找滑鼠懸浮時的<a>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('a:hover')

2. :nth-child偽類選擇器

:nth-child偽類選擇器用於指定元素的子元素在父元素中的排列位置，如以下示例代碼：


<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

通過查找第三個<li>標籤，可以使用如下代碼進行定位：


driver.find_element_by_css_selector('li:nth-child(3)')

五、總結

CSS選擇器定位方法是Selenium中最常用、最靈活的定位方式之一。在使用CSS選擇器時，需要熟悉基本選擇器、屬性選擇器以及偽類選擇器等，並根據實際情況選擇合適的選擇器進行頁面元素的定位。

原創文章，作者：MMMDH，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/363882.html