Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.



Introduction to the

Selenium is one of the most widely used open source Web UI (user interface) automation test suites. Selenium supports C#, Java, Perl, PHP, Python, and Ruby. Selenium Web drivers are currently the most popular in Python and C#. Selenium test scripts can be coded in any supported programming language and run directly in most modern Web browsers. Selenium is also a powerful tool in the field of crawlers and can solve most of the anti-crawling problems of web pages, but it is not a panacea. Its most obvious disadvantage is its slow speed. Now enter the formal study stage.


Selenium is installed

Open CMD and enter the following command to install.

pip install -i https://pypi.douban.com/simple selenium
Copy the code

After executing, use PIP Show Selenium to see if the installation was successful.


Installing the Browser Driver

Different drivers need to be installed for different browsers. Here is a list of common browsers and corresponding driver download links, some of the sites need to “science online” to open oh (DDDD).

  • Firefox browser driver: Firefox
  • Chrome browser driver: Chrome
  • IE browser driver: IE
  • Edge browser driver: Edge
  • PhantomJS browser driver: PhantomJS
  • Opera browser driver: Opera

Here is a demonstration of installing the Chrome driver. However, there are still some bugs in The automated testing of Chrome using Selenium. Normal use is fine, but if some rare errors occur, you can try using Firefox, which is officially recommended by Selenium.

Determine the Browser version

In the new TAB, type Chrome :// Settings/to go to the Settings screen, and then select about Chrome.

View your own version information. Here MY version is 94, so download the corresponding versionChromeDrive.

Download the driver

Open theChrome driver. Click the corresponding version.Choose download based on your operating system.

After downloading, there is only one compressed packageexeFile. 将 chromedriver.exeSave to any location, and save the current Path to environment variables (my computer >> right-click properties >> Advanced System Settings >> Advanced >> Environment variables >> System variables >>Path), add time to pay attention not to the Path variable to cover, if covered do not shut down, and then Baidu. Use the following code to test the successful addition.

from selenium import webdriver

# Chrome
driver = webdriver.Chrome()
Copy the code


Locating page elements

Open the specified page

useseleniumLocating page elements is a prerequisite for you to understand the basic layout of the page and the meanings of the various tags, of course, if you haven’t already, now I can give you a brief introduction. Take CSDN as an example, we go to the home page and press[F12]Go to developer tools. The red box shows the code for the page, and all we need to do is locate and retrieve the elements we need from the code.To locate and retrieve information on a page, use thewebdriverOpen the specified page, and then locate.

from selenium import webdriver

# Chrome
driver = webdriver.Chrome()
driver.get('https://www.csdn.net/')
Copy the code

After executing the above statement, you will find that the browser closes immediately after opening the CSDN home page. To prevent the browser from closing automatically, add the following code.

# Do not automatically close the browser
option = webdriver.ChromeOptions()
option.add_experimental_option("detach".True)

Add option as a parameter to Chrome
driver = webdriver.Chrome(chrome_options=option)
Copy the code

This way, combining the above code will not automatically close the browser.

from selenium import webdriver

# Do not automatically close the browser
option = webdriver.ChromeOptions()
option.add_experimental_option("detach".True)

# Notice the chrome_options parameter added here
driver = webdriver.Chrome(chrome_options=option)
driver.get('https://www.csdn.net/')
Copy the code

Let’s take a look at some common ways to position page elements.

Id positioning

The id of the tag is unique, just like a human ID card, assuming that there is an input tag as follows.

<input id="toolbar-search-input" autocomplete="off" type="text" value="" placeholder="Why is C++ difficult?">
Copy the code

We can locate it by ID. Because id is unique, we can ignore the contents of other tags.

driver.find_element_by_id("toolbar-search-input")
Copy the code

The name to locate

Name Specifies the name of the label. It may not be unique on the page. Suppose you have a meta tag like this

<meta name="keywords" content="CSDN Blog,CSDN Academy,CSDN Forum,CSDN Live">
Copy the code

We can use find_element_by_name to locate meta tags.

driver.find_element_by_name("keywords")
Copy the code

The class location

Class specifies the class name of the tag, which may not be unique on the page. Suppose you have a div tag like this

<div class="toolbar-search-container">
Copy the code

We can use find_element_by_class_name to locate div tags.

driver.find_element_by_class_name("toolbar-search-container")
Copy the code

The tag positioning

Each tag is usually used to define a class of functionality, so the success rate of identifying an element through a tag is very low. Every page usually uses many of the same tags, such as \

, \

, etc. Again, use the div above as an example.
\>

\> 

<div class="toolbar-search-container">
Copy the code

We can use find_element_by_class_name to locate div tags.

driver.find_element_by_tag_name("div")
Copy the code

Xpath positioning

Xpath is a language for locating elements in AN XML document. It has a variety of ways to locate elements. Here’s an example of how it can be used.

<html>
  <head>.<head/>
  <body>
    <div id="csdn-toolbar">
      <div class="toolbar-inside">
        <div class="toolbar-container">
          <div class="toolbar-container-left">.</div>
          <div class="toolbar-container-middle">
            <div class="toolbar-search onlySearch">
			<div class="toolbar-search-container">
				<input id="toolbar-search-input" autocomplete="off" type="text" value="" placeholder="Why is C++ difficult?">
Copy the code

There are four ways to locate the last line of the input tag according to the label requirements above. Xpath provides multiple and not unique ways to locate the input tag.

# Absolute path (hierarchy) positioning
driver.find_element_by_xpath(
	"/html/body/div/div/div/div[2]/div/div/input[1]")
Use element attributes to locate
driver.find_element_by_xpath(
	"//*[@id='toolbar-search-input']"))
# hierarchy + element attribute location
driver.find_element_by_xpath(
	"//div[@id='csdn-toolbar']/div/div/div[2]/div/div/input[1]")
# Logical operator positioning
driver.find_element_by_xpath(
	"//*[@id='toolbar-search-input' and @autocomplete='off']")
Copy the code

The CSS positioning

CSS uses selectors to bind attributes to page elements. It has the flexibility to select any property of a control. It is generally faster to locate than xpath, but it is slightly difficult to use. CSS selector syntax:

methods example describe
.class .toolbar-search-container chooseclass = 'toolbar-search-container'All elements of
#id #toolbar-search-input chooseid = 'toolbar-search-input'The elements of the
* * Select all elements
element input Select all the<input\>The element
element>element div>input Select the parent element as<div\>All of the<input\>The element
element+element div+input Select the same level in the<div\>All the rest<input\>The element
[attribute=value] type='text' choosetype = 'text'All elements of

For a simple example, locate the input tag in the example above as well.

driver.find_element_by_css_selector('#toolbar-search-input')
driver.find_element_by_css_selector('html>body>div>div>div>div>div>div>input')
Copy the code

The link to locate

Link is used specifically to locate text links, such as the tag below.

<div class="practice-box" data-v-04f46969="">Join us! A daily practice</div>
Copy the code

We use find_element_by_link_TEXT and specify all text within the tag.

driver.find_element_by_link_text("Join us! A daily practice")
Copy the code

Partial_link positioning

The partial_link translates to “partial link”. If some text is too long, you can specify only part of the text to locate it, again using the example above.

<div class="practice-box" data-v-04f46969="">Join us! A daily practice</div>
Copy the code

We use find_element_by_partial_link_TEXT and specify part of the text within the tag for positioning.

driver.find_element_by_partial_link_text("Join")
Copy the code


Browser control

Modify the browser window size

Webdriver provides the set_WINDOW_size () method to change the size of the browser window.

from selenium import webdriver

# Chrome
driver = webdriver.Chrome()
driver.get('https://www.csdn.net/')
Set the width and height of the browser to 600x800
driver.set_window_size(600.800)
Copy the code

You can also use the maximize_window() method to achieve a full-screen browser display.

from selenium import webdriver

# Chrome
driver = webdriver.Chrome()
driver.get('https://www.csdn.net/')
Set the width and height of the browser to 600x800
driver.maximize_window()
Copy the code

Browser forward & back

Webdriver provides back and forward methods to move pages backwards and forwards. Next, we ① enter CSDN home page, ② open CSDN personal home page, ③back to CSDN home page, ④ forward to personal home page.

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()

# Visit CSDN home page
driver.get('https://www.csdn.net/')
sleep(2)
# Visit the CSDN homepage
driver.get('https://blog.csdn.net/qq_43965708')
sleep(2)
Go back to the CSDN home page
driver.back()
sleep(2)
# Go to your profile page
driver.forward()
Copy the code

Careful readers will notice that the second get() opens a new page on the original page, not in a new TAB. You can open a new link in a new TAB if you want, but you need to change the code and execute the JS statement to open the new TAB.

# Open in the original page
driver.get('https://blog.csdn.net/qq_43965708')

# Open in new TAB
js = "window.open('https://blog.csdn.net/qq_43965708')"
driver.execute_script(js)
Copy the code

Browser refresh

In special cases where we might need to refresh the page to get the latest page data, we can use refresh() to refresh the current page.

# Refresh page
driver.refresh()
Copy the code

Browser Window switching

In many cases we all need to use window switches, for example: when we click the register button, it would open a new TAB, but the code does not actually switch to the new page, then if you want to locate the registration page tag will find positioning, then you need to switch to the actual window latest open that window. We first get the handle of the current window, the order of saving the information is according to the time, the latest opened window is placed at the end of the array, then we can locate the latest opened window.

Get handles to multiple open Windows
windows = driver.window_handles
Switch to the newly opened window
driver.switch_to.window(windows[-1])
Copy the code

Common operation

Common operations in WebDriver include:

methods describe
send_keys() Emulated the input specified
clear() Clear text content
is_displayed() Determines whether the element is visible
get_attribute() Gets the tag attribute value
size Returns the size of the element
text Return element text

Next, take the CSDN home page as an example, which needs to use the search box and search button. The following example will give you an idea of how to use each operation.

from selenium import webdriver

driver = webdriver.Chrome()

driver.get('https://www.csdn.net/')
sleep(2)
# Locate the search input box
text_label = driver.find_element_by_xpath('//*[@id="toolbar-search-input"]')

# Enter Dream, Killer in the search box
text_label.send_keys('Dream, Killer')

sleep(2)
# Clear the search box
text_label.clear()

Print whether the search box element is visible
print(text_label.is_displayed())
Placeholder value
print(text_label.get_attribute('placeholder'))

# Locate the search button
button = driver.find_element_by_xpath('//*[@id="toolbar-search-button"]/span')
Print the size of the button
print(button.size)
Print the text on the button
print(button.text)

{'height': 32, 'width': 28} search for ''
Copy the code


The mouse control

In WebDriver, mouse operations are encapsulated in ActionChains. Common methods are as follows:

methods describe
click() Click on the left?
context_click() right-click
double_click() Double click on the
drag_and_drop() Drag the
move_to_element() hovering
perform() Perform all actions stored in ActionChains

Click on the left?

Click the left mouse button to complete the simulation operation, generally click to enter the sub-page and so on, the left button does not need to use ActionChains.

# Locate the search button
button = driver.find_element_by_xpath('//*[@id="toolbar-search-button"]/span')
# Perform a click operation
button.click()
Copy the code

right-click

Right mouse click operation is very different from left click, need to use ActionChains.

from selenium.webdriver.common.action_chains import ActionChains

# Locate the search button
button = driver.find_element_by_xpath('//*[@id="toolbar-search-button"]/span')
# Right-click search button
ActionChains(driver).context_click(button).perform()
Copy the code

Double click on the

Simulate the double – click mouse operation.

# Locate the search button
button = driver.find_element_by_xpath('//*[@id="toolbar-search-button"]/span')
Execute the double click action
ActionChains(driver).double_click(button).perform()
Copy the code

Drag the

Simulates a mouse drag operation that takes two necessary parameters,

  • Source: Element dragged by the mouse
  • Target: The target element to drag and release
Locate the element to drag
source = driver.find_element_by_xpath('xxx')
# Locate the target element
target = driver.find_element_by_xpath('xxx')
Perform the drag action
ActionChains(driver).drag_and_drop(source, target).perform()
Copy the code

hovering

The purpose of simulated hover is to show hidden drop-down boxes, such as the favorites bar on the CSDN home page. Let’s see how this works.

# Location favorites bar
collect  = driver.find_element_by_xpath('//*[@id="csdn-toolbar"]/div/div/div[3]/div/div[3]/a')

# Hover over the favorites TAB
ActionChains(driver).move_to_element(collect).perform()
Copy the code


Keyboard control

The Keys class in WebDriver provides almost all key methods on the keyboard. We can use send_keys + Keys to output keyboard combinations such as “Ctrl + C”, “Ctrl + V”, etc.

from selenium.webdriver.common.keys import Keys

# Locate the input box and enter the text
driver.find_element_by_id('xxx').send_keys('Dream, killer')

# Simulate enter key to jump (after input)
driver.find_element_by_id('xxx').send_keys(Keys.ENTER)

Use Backspace to delete a character
driver.find_element_by_id('xxx').send_keys(Keys.BACK_SPACE)

# Ctrl + A Selects the contents of the input box
driver.find_element_by_id('xxx').send_keys(Keys.CONTROL, 'a')

# Ctrl + C copies the contents of the input field
driver.find_element_by_id('xxx').send_keys(Keys.CONTROL, 'c')

# Ctrl + V Paste the contents of the input box
driver.find_element_by_id('xxx').send_keys(Keys.CONTROL, 'v')
Copy the code

Other common keyboard operations:

operation describe
Keys.F1 F1 key
Keys.SPACE The blank space
Keys.TAB The Tab key
Keys.ESCAPE ESC
Keys.ALT Alt
Keys.SHIFT The Shift key
Keys.ARROW_DOWN Down arrow
Keys.ARROW_LEFT The arrow to the left
Keys.ARROW_RIGHT The arrow to the right
Keys.ARROW_UP Up arrow


For those who are new to Python or want to learn Python, you can search “Python New Horizons” on wechat to communicate and learn with others. They are all beginners. Sometimes a simple question is stuck for a long time, but others may suddenly realize it with a little help.