# 7L Selenium IDE – 定位元素（續） > 原文： [https://javabeginnerstutorial.com/selenium/7l-ide-locating-elements-contd/](https://javabeginnerstutorial.com/selenium/7l-ide-locating-elements-contd/) 嗨呀測試人員！ 我回來了，比賽開始了！ 讓我們繼續前進，在我們的網頁上找到一些古怪的元素！！ 在這篇文章中，我們將看到： 定位依據 * CSS * DOM * XPath 讓我們一一看一下。 ## 通過 CSS 定位 CSS（層疊樣式表）將樣式添加到網頁中，通常用于描述 HTML 文檔的顯示或呈現。 為了將這些樣式屬性綁定到文檔中的元素，使用了 **CSS 選擇器**。 這些選擇器用于根據其名稱，ID，類，屬性等的組合來選擇 HTML 元素。 通常，高級 Selenium 用戶會通過這種方法在網頁上定位元素。 它有點復雜，但主要在元素沒有 ID 或名稱的情況下首選。 指定目標的格式以標簽“`css =`”開頭，后跟相應的標簽名稱和其他必需元素。 讓我們欣賞使用最常用的 CSS 選擇器定位元素的巨大優勢。 ### 標簽和 ID HTML 標記和元素的 ID 與井號（`#`）一起使用。 *格式*： `css = tag#id` *示例*：打開 Amazon 的登錄頁面。 讓我們找到“電子郵件（用于移動帳戶的電話）”文本框。  標記名稱為“輸入”，元素的 ID 為“`ap_email`”。  因此，按照目標格式，輸入“`css = input#ap_email`”并單擊“查找”按鈕將按預期突出顯示網頁上的“電子郵件”文本框。 ### 標簽和類別 此方法使用 HTML 標記和要訪問的元素的類以及點（`.`）符號。 *格式*：`css = tag.class` *示例*：打開 Indeed.com，讓我們突出顯示文本“`what`”。  標簽名稱為“`td`”，元素的類別為“`npb`”。  輸入“`css = td.npb`”，然后單擊“查找”按鈕，將突出顯示文本“`what`”。 如果多個元素具有相同的標記和類名稱，則僅會識別與條件匹配的第一個元素。 在這種情況下必須使用過濾器。 在之前的博客文章中對此概念進行了詳細說明。 ### 標簽和屬性 在此方法中使用 HTML 標記，最好使用要訪問的元素的唯一屬性及其對應的值。 屬性和值用方括號[]括起來。 *格式*： `css = tag[prop=value]` *示例*：打開亞馬遜登錄頁面，讓我們找到“電子郵件”文本框。 標簽名稱為“`input`”，屬性為“`name`”，其對應值為“`email`”。  為目標輸入“`css = input[name=email]`”，然后單擊“查找”按鈕，將突出顯示“電子郵件”文本框。  ### 標簽，類和屬性 這與“標記和屬性”定位策略相似，但是帶有類名和點（`.`）符號。 通常在兩個 Web 元素具有相同的標記和類名稱時使用。 *格式*： `css = tag.class[prop=value]` *示例*：打開 facebook.com，讓我們找到“電子郵件或電話”文本框。 請注意下圖，“電子郵件”和“密碼”文本框具有相同的標簽“`input`”和相同的類名“`inputtext`”，但屬性“`tabindex`”的值不同。  因此，標簽名稱為“`input`”，類為“`inputtext`”，屬性為“`tabindex`”且其對應值為“1”的標簽將突出顯示“電子郵件或電話”文本框。 屬性值與“2”相同的組合將突出顯示“密碼”文本框。  輸入“`css = input.inputtext[tabindex=1]`”以突出顯示“電子郵件或電話”文本框。 ### 內部文本 在某些情況下，ID，類或屬性未用于特定元素。 要找到這樣的元素，可以使用網頁上顯示的實際文本（內部文本）。 *格式*： `css = tag:contains("innerText")` *示例*：打開亞馬遜登錄頁面，讓我們突出顯示文本“`Password`”。  這里的標簽是“`label`”，內部文本是“`Password`”。 輸入“`css = lable:contains("Password")`”高亮顯示文本“`Password`”。  ## 通過 DOM 定位 文檔對象模型是用于表示 HTML 文檔中元素的約定。 定位策略利用了 DOM 模型中使用的樹結構。 因此，使用分層的點分符號來獲取元素的位置。 指定 DOM 定位器時，不需要“`dom =`”標簽，因為只有 DOM 定位器以單詞“`document`”開頭。 *示例*代碼：  *方法 1*：`document.getElementById("testForm")`– 使用元素的 ID。 *方法 2*：`document.forms[0]` – “表單”將返回文檔中使用的所有表單的集合。 因此，使用索引以唯一的方式指定被測元素。 *方法 3*：`document.forms[0].user1` – 第一種形式，訪問`user1`元素。 *方法 4*：`document.getElementsByName("seatingClass")[1]` – “`getElementsByName`”也將返回括號內指定名稱相同的元素集合。 因此，索引返回所需的元素。 在這種情況下，可以訪問業務單選按鈕。 如果使用索引`[0]`，則可以訪問經濟單選按鈕。 *方法 5*：訪問`document.forms["testForm"].elements["user2"]` – 名為“`testForm`”的表單的`user2`。 *方法 6*：`document.forms[1].elements[2]` – 這將返回“`seatingClassForm`”中的“第一個”單選按鈕。 現在是時候使用 Selenium IDE 探索 Web 應用的 DOM 了。 ## 通過 XPath 定位 XPath 是一種語法，用于在 XML 文檔中導航和定位節點。 由于 HTML 只是 XML 的實現，因此可以使用 XPath 策略來查找所需的元素。 如果找不到合適的 ID，名稱或類等來查找元素，則可以使用 XPath。 使用 XPath 定位元素有兩種。 一個是絕對路徑（不建議使用），因為它會在對現有 HTML 代碼進行最小改動的情況下中斷。 另一個選項是相對路徑 – 使用 ID 或名稱查找附近的元素，并使用兩者之間的關系使用 XPath 查找所需的元素。 因此，幾乎可以使用 XPath 策略定位網頁上的任何元素。 這種定位策略非常復雜，通常是高級 Selenium 用戶首選的定位策略。 但是不用擔心！ 為了使整個 XPath 查找方法變得容易，我們將“Firebug”作為 Firefox 瀏覽器的附加組件。 很快您就會遇到一篇博客文章，該文章完全致力于 Firebug 的安裝和使用！ 歡呼！！ 另外，由于僅 XPath 定位符以“`//`”開頭，因此不需要為 XPath 定位符指定“`xpath =`”。 *示例*：打開 Amazon 登錄頁面，然后讓我們使用 XPath 找到“電子郵件”文本框。 點擊 Firebug 圖標并檢查所需的元素（在本例中為“電子郵件”文本框）。 相應的源代碼將顯示在網頁的下部。  右鍵點擊突出顯示的代碼，然后選擇“復制 XPath”，如下所示。  在目標中，輸入一個正斜杠（`/`），然后使用 Firebug 粘貼復制的 XPath，“`//html/body/div[1]/div[1]/div[3]/div/div[2]/form/div/div/div/div[1]/input`”。 請注意，XPath 定位符應以兩個正斜杠開頭。  因此，“電子郵件”文本框將按預期突出顯示。 你去！ 我們剛剛完成了各種可用的定位策略。 是的，要選擇的定位器類型完全取決于要測試的應用。 在將如此多的知識融入您的大腦之后，我知道您將每年兩次要求我六個月的假期。 因此，在另一篇文章中再見。 祝你今天愉快！