CSS選擇器屬性 - Selenium教學

語法: css = <HTML tag> <[attribute =屬性值]>
可以使用值，類型和名稱作為屬性來創建CSS選擇器。屬性值表示在使用特定屬性時的正在訪問的值。

考慮一個關於如何使用屬性創建唯一標識Web元素的CSS選擇器的示例。

嘗試通過為該特定Web元素定義CSS選擇器來定位Web元素。

啟動Firefox流覽器。
單擊流覽器右上角的Selenium圖示。
它將啟動Selenium IDE的默認介面。
單擊“測試腳本編輯器”框中的命令文本框。

將第一個命令的屬性修改為:

命令:open
目標:http://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示例™ - 許虎虎</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" class="form-control" id="username"/>
   <input name="password" type="password" class="form-control" id="password"/>
   <input name="continue" type="submit" id="continue" class="btn" value="登錄" />
  </form>
  </div>
 </body>
<html>

現在，使用第二個命令，找到“用戶名”文本框。
首先，將檢查“用戶名”文本框，以確定哪個屬性最適合定位所需的Web元素。右鍵單擊“用戶名”文本框，然後選擇“檢查元素”。