search
HomeWeb Front-endHTML Tutorialselenium webdriver(2)-page object positioning_html/css_WEB-ITnose

webdriver的元素定位很灵活,提供了多种定位方式:

Id

LinkText

PartialLinkText

Name

TagName

Xpath

ClassName

CssSelector

这些方法可以在org.openqa.selenium.By中找到,下面一一道来;

假如有这样的需求:登录安居客网站,搜索陆家嘴附近的二手房源,网页是这样的

这个需求涉及到一个输入框和一个提交按钮,先查看网页源码

在输入框中输入“陆家嘴”然后点击“二手房”按钮,如果能跳转到陆家嘴相关页面就完成了这个需求,我们尝试用webdriver提供的元素定位方法来解决

Id                                                                                                                                                                                       

id是唯一标识,通过id来定位是非常快速和准确的

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //id      WebElement text=driver.findElement(By.id("glb_search0"));      text.sendKeys("陆家嘴");      WebElement button=driver.findElement(By.id("btnSubmit"));      button.click();            if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

Name                                                                                                                                                                                 

提交表单时可以通过name属性获取数据,较id来说并不常用,有id属性时建议优先使用id属性,上面的源码中text输入框是有name属性的,button依然用id来获取(当然,如果测试需要的话可以修改源码,没有修改源码权限的自动化测试是很难进行的)。

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //name      WebElement text=driver.findElement(By.name("kw"));      text.sendKeys("陆家嘴");      WebElement button=driver.findElement(By.id("btnSubmit"));      button.click();            if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

TagName                                                                                                                                                                           

tagname一般用来获取批量数据,如统计页面链接数,输入框数量等等,用tagname来定位单一元素有点麻烦

import java.util.List;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            List<WebElement> inputs=driver.findElements(By.tagName("input"));      for(int index=0;index<inputs.size();index++){          if(inputs.get(index).getAttribute("id").equals("glb_search0"))              inputs.get(index).sendKeys("陆家嘴");          if(inputs.get(index).getAttribute("id").equals("btnSubmit"))              inputs.get(index).click();      }                if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

ClassName                                                                                                                                                                        

当标签具有class属性时也可使用classname来定位,不过要注意class的值不是唯一的findElement方法返回匹配到的第一个元素

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //classname      WebElement text=driver.findElement(By.className("kw"));      text.sendKeys("陆家嘴");      WebElement button=driver.findElement(By.className("btn"));      button.click();                if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

Xpath                                                                                                                                                                                 

xpath相关教程可以参考w3school上的教程,为了程序的统一性,平时工作中我都是使用xpath来定位元素的

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //xpath      WebElement text=driver.findElement(By.xpath("//input[@id='glb_search0']"));      text.sendKeys("陆家嘴");      WebElement button=driver.findElement(By.xpath("//input[@id='btnSubmit']"));      button.click();                if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

CssSelector                                                                                                                                                                       

CssSelector教程可以参考css3-selectors,CssSelector和xpath应该是实际工作中用的最多的定位方法了,两者没有优劣之分,看个人喜好吧。

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //cssSelector      WebElement text=driver.findElement(By.cssSelector("input[id='glb_search0']"));      text.sendKeys("陆家嘴");      WebElement button=driver.findElement(By.cssSelector("input[id='btnSubmit']"));      button.click();                if(driver.getTitle().contains("陆家嘴"))          System.out.print("搜索成功,当前页面为"+driver.getTitle());      else          System.out.print("搜索失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

LinkText和PartialLinkText                                                                                                                                                  

LinkText和PartialLinkText用来定位网页中的超链接,需要a标签中的全部或部分内容即可。例如,需要访问热门版块中的古美罗阳可以这样定位

import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");            //linkText      WebElement a=driver.findElement(By.linkText("古美罗阳"));      a.click();      //partialLinkText      //WebElement a=driver.findElement(By.partialLinkText("古美"));      //a.click();      if(driver.getTitle().contains("古美罗阳"))          System.out.print("访问成功,当前页面为"+driver.getTitle());      else          System.out.print("访问失败,当前页面为"+driver.getTitle());            driver.quit();       }  }

层级定位                                                                                                                                                                             

webdriver提供了层级定位的方式即通过父元素访问其子元素,比如,输出热门版块下的所有版块

import java.util.List;import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;  import org.openqa.selenium.chrome.ChromeDriver;  import org.openqa.selenium.WebElement; public class NewTest  {    public static void main(String[] args)    {          System.setProperty("webdriver.chrome.driver",      "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");      WebDriver driver = new ChromeDriver();      driver.get("http://anjuke.com");                  WebElement element=driver.findElement(By.xpath("//div[@id='content_Rd0']/dl[@class='dl0']/dd"));            List<WebElement> links=element.findElements(By.tagName("a"));            for(int index=0;index<links.size();index++){          System.out.println(links.get(index).getAttribute("text"));      }            driver.quit();       }  }


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.