02_WebDriverAPI之定位元素

2024-03-14 14:20:07 分类：前端 热度：96 评论： 0

从定位元素开始

基本定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试python自动化测试的网页</title>
</head>

<script type="text/javascript">
  function onHandleCarClick()
  {
    alert('处理用户点击购物车的请求')
  }

  function onHandleOrderClick()
  {
      alert('处理用户点击订单的请求')
  }

  function onHandleServiceClick()
  {
      alert('处理用户点击售后服务的请求')
  }



</script>
<body>
<h1 id='car' onclick="onHandleCarClick()">购物车</h1>
<h1 id='order' onclick="onHandleOrderClick()">我的订单</h1>
<h1 id='service' onclick="onHandleServiceClick()">售后服务</h1>

</body>

</html>

package ***.wnx.naizi.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class TestController
{

    @GetMapping("/findElementById")
    public String findElementById()
    {

        return "demo";

    }
}

http://localhost:8080/findElementById

  • 通过标签ID
from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")
driver.find_element_by_id('car').click()

# driver.find_element_by_id('order').click()

# driver.find_element_by_id('service').click()

# 写一段测试化的脚本，模拟用户点击购物车，我的订单，售后服务
  • 通过标签名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>

<script type="text/javascript">
  function onHandleCarClick()
  {
    alert('处理用户点击购物车的请求')
  }

  function onHandleOrderClick()
  {
      alert('处理用户点击订单的请求')
  }

  function onHandleServiceClick()
  {
      alert('处理用户点击售后服务的请求')
  }



</script>
<body>
<h1 onclick="onHandleCarClick()">购物车</h1>
<h2 onclick="onHandleOrderClick()">我的订单</h2>
<h3 onclick="onHandleServiceClick()">售后服务</h3>

</body>

</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")
# 通过标签名 去查到元素
driver.find_element_by_tag_name('h3').click()
  • 通过标签属性名称
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>

<script type="text/javascript">
  function onHandleCarClick()
  {
    alert('处理用户点击购物车的请求')
  }

  function onHandleOrderClick()
  {
      alert('处理用户点击订单的请求')
  }

  function onHandleServiceClick()
  {
      alert('处理用户点击售后服务的请求')
  }



</script>
<body>
<h1 name = "car" onclick="onHandleCarClick()">购物车</h1>
<h1 name = "order" onclick="onHandleOrderClick()">我的订单</h1>
<h1 name = "service" onclick="onHandleServiceClick()">售后服务</h1>

</body>

</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")
# 通过标签名 去查到元素
driver.find_element_by_name('car').click()
  • 通过class定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>
    .style1
    {
       background: red;
        text-align: left;

    }

    .style2
    {
        background: green;
        text-align: center;
    }

    .style3
    {
        background: blue;
        text-align: right;
    }

</style>

<script type="text/javascript">
  function onHandleCarClick()
  {
    alert('处理用户点击购物车的请求')
  }

  function onHandleOrderClick()
  {
      alert('处理用户点击订单的请求')
  }

  function onHandleServiceClick()
  {
      alert('处理用户点击售后服务的请求')
  }



</script>
<body>
<h1 class="style1"  onclick="onHandleCarClick()">购物车</h1>
<h1 class="style2" onclick="onHandleOrderClick()">我的订单</h1>
<h1 class="style3"  onclick="onHandleServiceClick()">售后服务</h1>

</body>

</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")
# 通过标签样式，去访问属性
driver.find_element_by_class_name('style1').click()
  • 通过link 定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>



</style>

<script type="text/javascript">


</script>
<body>


<div>
    <ul>
        <li><a href="https://www.baidu.***">百度</a></li>
        <li><a href="https://www.csdn.***">CSDN</a></li>
        <li><a href="https://www.taobao.***">淘宝</a></li>
    </ul>

</div>


</body>

</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 查到a标签所在元素的名称
driver.find_element_by_link_text('百度').click()
  • 通过 partial_link定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>



</style>

<script type="text/javascript">


</script>
<body>


<div>
    <ul>
        <li><a href="https://www.baidu.***">这是一个百度的超链接</a></li>
        <li><a href="https://www.csdn.***">CSDN</a></li>
        <li><a href="https://www.taobao.***">淘宝</a></li>
    </ul>

</div>


</body>

</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 查到a标签所在元素的名称 局部匹配
driver.find_element_by_partial_link_text('百度').click()

XPath定位

绝对路径定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>


</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td>
                <button onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td>
                <button onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")


driver.find_element_by_xpath('/html/body/div/table[1]/tbody/tr[2]/td[4]/button').click()

利用元素属性定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>


</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td>
                <button id="update_1" onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td>
                <button  onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 通过ID匹配
driver.find_element_by_xpath("//button[@id='update_1']").click()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>


</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td>
                <button id="update_1" onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td>
                <button name = "update_2"  onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 通过name匹配
driver.find_element_by_xpath("//button[@name='update_2']").click()

层级与属性结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>
    .style
    {
        background: azure;
        text-align: center;
    }

</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td class="style">
                <button onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td>
                <button onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 找到td标签，利用层级找儿子button
driver.find_element_by_xpath("//td[@class='style']/button").click()


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>
    .style
    {
        background: azure;
        text-align: center;
    }

</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td class="style">
                <button onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td class="style">
                <button onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 通过ID匹配
#driver.find_elements_by_xpath("//td[@class='style']/button")[0].click()
driver.find_elements_by_xpath("//td[@class='style']/button")[1].click()

使用逻辑运算符

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 同时满足条件 and
driver.find_element_by_xpath("//td[@class='style' and @name='lisi']/button").click()

CSS定位

通过class定位

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

# 根据类选择器去定位元素
driver.find_elements_by_css_selector('.style')[0].click()

通过id定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>
    #style
    {
        background: azure;
        text-align: center;
    }


    #style2
    {
        background: azure;
        text-align: center;
    }


</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td id="style">
                <button onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td id="style2">
                <button onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")

driver.find_element_by_css_selector('#style').click()

通过标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用于测试Python自动化测试的网页</title>
</head>
<style>


    td
    {
        background: azure;
        text-align: center;
    }


</style>
<script type="text/javascript">
    function OnHandleBtn1Click() {
        alert('张三信息被修改！！！')

    }

    function OnHandleBtn2Click() {
        alert('李四信息被修改！！！')
    }

    function OnHandleBtn3Click() {
        alert('型面冲头信息被修改！！！')

    }

    function OnHandleBtn4Click() {
        alert('定位键信息被修改！！！')

    }


</script>
<body>
<div>

    <h1>运维管理</h1>
    <table width="400" border="1">

        <tbody>
        <tr>
            <td>客户</td>
            <td>地址</td>
            <td>电话</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>东海市</td>
            <td>18154215487</td>
            <td>
                <button onclick="OnHandleBtn1Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>东莞市</td>
            <td>18154215481</td>
            <td>
                <button onclick="OnHandleBtn2Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
    <h2>产品管理</h2>
    <table width="400" border="1">
        <tbody>
        <tr>
            <td>名称</td>
            <td>成本</td>
            <td>使用率</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>型面冲头</td>
            <td>1500</td>
            <td>53%</td>
            <td>
                <button onclick="OnHandleBtn3Click()">修改</button>
            </td>
        </tr>
        <tr>
            <td>定位键</td>
            <td>1600</td>
            <td>86%</td>
            <td>
                <button onclick="OnHandleBtn4Click()">修改</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</body>
</html>

from selenium import webdriver  # 引入模块

driver = webdriver.Firefox()  # 引入edge驱动
driver.get("http://localhost:8080/findElementById")


driver.find_elements_by_css_selector('td')[7].click()
转载请说明出处内容投诉
CSS教程_站长资源网 » 02_WebDriverAPI之定位元素
小盆友

小盆友

分享到：

相关推荐

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买