CSS选择器ID - Selenium教程

语法：css = <HTML tag> <#> <ID属性的值>。
'#'用于表示ID属性。如果正在使用ID属性创建CSS Selector，则必须使用#号。
该属性的值始终以井号开头。

下面来看看一个关于如何使用ID属性来创建唯一标识Web元素的CSS Selector的示例。将尝试通过为该特定Web元素定义CSS Selector来定位Web元素。

启动Firefox浏览器。
单击浏览器右上角的Selenium图标。
它将启动Selenium IDE的默认界面。
单击“测试脚本编辑器”框中的命令文本框。

将第一个命令的属性修改为：

命令：open
目标：localhost

执行后，此命令将在Firefox浏览器上加载本地登录页面。本地文件：index.php 的代码如下所示：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Selenium示例&trade; - 许虎虎</title>
 <body>
 <div style="margin:auto;width:60%;">

  <p>
    Selenium示例
  </p>
  <?php
    if($_POST){
        $username = isset($_POST['username'])? trim($_POST['username']):'';
        $password = isset($_POST['password'])? trim($_POST['password']):'';
        if($username=='zaixian' && $password = '123456'){
            echo "<p>您好，{$username} !</p>";
        }
    }
    ?>
  <form id="loginForm" method="POST">
   <input name="username" type="text" id="username"/>
   <input name="password" type="password" id="password"/>
   <input name="continue" type="submit" id="continue" value="登录" />
  </form>
  </div>
 </body>
<html>

现在，使用第二个命令，找到“用户名”文本框。首先，将检查“用户名”文本框以获取其ID属性的值。右键单击“用户名”文本框，然后选择“检查元素”。