Photo on selenium

前言

在第六週 "鼠年全马铁人挑战 WEEK 06：Selenium 自动化测试工具" 的文章中，稍微简单的介绍一下 Selenium，而这週的内容将会延续 Selenium 继续往下介绍 Selenium WebDriver。

介绍 Selenium WebDriver

WebDriver

WebDriver 是用来控制 Web 浏览器的行为，每一个浏览器都会有各自相对应的驱动程式(driver)，而 Selenium 透过 driver 作为后盾，使用 driver 所支援的浏览器进一步达到浏览器自动化。让操作就像是真的使用者在操作一样。

那 Selenium 支援哪些浏览器？相对应的 driver 又是哪些呢？
如果有在关注小弟文章的大哥大姐们应该已经知道这个问题的答案了，如果还没有关注的大哥大姐们现在关注也不迟 (b･∀･)b。
小弟在上上个礼拜 "鼠年全马铁人挑战 WEEK 06：Selenium 自动化测试工具" 的文章中，"初步认识 Selenium" 的小节里，已经做过简单的介绍了。但是为了大哥大姐们方便阅读，小弟就简单的在下方再附上资讯。

Microsoft Edge : Microsoft Edge Driver/Microsoft WebDriverGoogle Chrome : chromedriverInternet Explorer 11 : IEDriverServerMozilla Firefox : geckodriverOpera : operachromiumdriverSafari : safaridriver

如果还没有安装过 driver 的大哥大姐们，有兴趣的话可以看看上上个礼拜的文章进行操作，因为下面的小节跟下个礼拜的文章介绍都会用到，如果有大哥大姐想玩玩看的可以跟着小弟一起做，如果有问题也可以让小弟一起学习。
相关资讯: "鼠年全马铁人挑战 WEEK 06：Selenium 自动化测试工具" 文章的 "简单测试 Selenium" 小节。 (小弟没有在骗点阅率，绝对没有 (ˊ=◞౪◟=ˋ) )

定位元素

如果想要使用 Selenium WebDriver 的话，势必要了解一下如何定位元素，因为在上一篇的 鼠年全马铁人挑战 WEEK 07：Selenium IDE 文章中，所使用的 Selenium IDE 其定位元素的方式是手动点击 Web 后自动生成的，基本上不用手动去设定定位元素，所以在这篇文章的内容中，将会介绍一下定位元素的各种方式。

如果想要测试的大哥大姐们，记得在程式的开头先导入 driver 才有办法动作喔～

from selenium import webdriverdriver = webdriver.Chrome()driver.get('https://你想测试的网站连结')# 测试内容driver.close()

WebDriver 中有八种不同的内置元素定位策略：
以下範例小弟皆是使用 python 语言，如果想要了解更多语言的使用方式，可以到 selenium.dev documentation 进行参考。

# example 1、2 这两个是用来解释用的 html 程式範本example 1:<input id="search" name="content" class="bar" type="text">example 2:<a href="https://bit.ly/2UrFeNo">Ron_Hsieh iT首页</a>

class name:
功能: CSS 和 JavaScript 可以使用 class 值对特定元素执行某些任务。
位置: 该值会依附在元素中。
範例: 使用 class name 来找寻上方的 example 1 的 <input>。 driver.find_element_by_class_name("bar")css selector:
使用: 最简单的方式就是到网页打开 "开发者工具" 複製 Selector。
範例: 使用 class name 来找寻上方的 example 1 的 <input>。 driver.find_element_by_css_selector("input[id='search']")id:
功能: CSS 和 JavaScript 可以使用 id 值对特定元素执行某些任务。
位置: 该值在 HTML 文档中必须唯一，会依附在元素中。
範例: 使用 id 来找寻上方的 example 1 的 <input>。
driver.find_element_by_id("search")link text:
功能: 在网页中是一个连结，可以让使用这进行快速跳转。
位置: 该资讯会以 <a href="..."></a> 的元素进行包装。
使用: link text 的使用方式，文字内容必须全部文字符合。
範例: 使用 link text 来找寻上方的 example 2 的 <a>
driver.find_element_by_link_text("Ron_Hsieh iT首页")name:
功能: 在网页中主要是被用来获取使用者提交内容的标示。
位置: 该值在 HTML 文档基本上是唯一的，会依附在元素中。
範例: 使用 name 来找寻上方的 example 1 的 <input>。
driver.find_element_by_name("content")partial link text:
功能与位置皆与 link text 相同。
使用: partial link text 的使用方式，文字内容只需部分符合。
範例: 使用 partial link text 来找寻上方的 example 2 的 <a>
driver.find_element_by_partial_link_text("首页")tag name:
功能: 纯粹标记元素的标籤名称。
位置: 元素最前方与最后方都会被东西所包覆，不要怀疑就是它了。
範例: 使用 tag name 来找寻上方的 example 2 的 <a>。
driver.find_element_by_tag_name("a")xpath:
使用: 最简单的方式就是到网页打开 "开发者工具" 複製 XPath。
範例: 使用 class name 来找寻上方的 example 1 的 <input>。
driver.find_element_by_xpath("//input[@id='search']")

开启 "开发者工具" 複製 selector 与 xpath 的方式

结尾

希望这一篇的内容不会讲的太难懂。
我写到心情跟快跟这只猴子一样了。
如果有疑问或是有错误，还请各位大哥大姐提点。
下週会继续介绍 Selenium WebDriver 的实际应用。
小弟将继续往下週迈进。 ─=≡Σ((( つ•̀ω•́)つ

参考文件:

Selenium 官方网站
Selenium HTML element locator 定位器 - 菜鸟工程师肉猪