[Selenium+Chrome使用總結]加載Flash、禁用JS腳本、滾動頁面至元素、縮放頁面

前言

前幾周作了個使用Selenium的項目，踩了好多好多好多的Selenium的坑，愈來愈感受他做爲一個第三方庫，對於Chrome的操做實在是有侷限。另外，推薦你們一個Selenium以外的操做瀏覽器的選擇：puppeteer(github.com/GoogleChrom…),是來自谷歌的庫。它解決了不少在Selenium裏很難解決的問題，好比手機頁面截全屏。

好了，收回來，Selenium不少難解決的問題，咱們要首先想到從JS腳本出發，畢竟Selenium仍是支持驅動瀏覽器運行JS腳本的。

這篇文章的內容主要是Selenium平常開發中會遇到的坑，以Java代碼爲主，固然Python的小夥伴不用擔憂，這裏全部的解決方案都是能夠在Python中通用的。

Selenium

主要參考

Selenium使用總結（Java版本）：

juejin.im/post/5c1388…

Selenium準備

chromedriver各版本鏡像：

npm.taobao.org/mirrors/chr…

chromedriver版本與chrome客戶端對應支持關係：

npm.taobao.org/mirrors/chr…

最新版本截圖：

----------ChromeDriver v2.46 (2019-02-01)----------
Supports Chrome v71-73
Resolved issue 2728: Is Element Displayed command does not work correctly with v0 shadow DOM inserts [[Pri-1]]
Resolved issue  755: /session/:sessionId/doubleclick only generates one set of mousedown/mouseup/click events [[Pri-2]]
Resolved issue 2744: Execute Script returns wrong error code when JavaScript returns a cyclic data structure [[Pri-2]]
Resolved issue 1529: OnResponse behavior can lead to port exhaustion [[Pri-2]]
Resolved issue 2736: Close Window command should handle user prompts based on session capabilities [[Pri-2]]
Resolved issue 1963: Sending keys to disabled element should throw Element Not interactable error [[Pri-2]]
Resolved issue 2679: Timeout value handling is not spec compliant [[Pri-2]]
Resolved issue 2002: Add Cookie is not spec compliant [[Pri-2]]
Resolved issue 2749: Update Switch To Frame error checks to match latest W3C spec [[Pri-3]]
Resolved issue 2716: Clearing Text Boxes [[Pri-3]]
Resolved issue 2714: ConnectException: Failed to connect to localhost/0:0:0:0:0:0:0:1:15756. Could not start driver. [[Pri-3]]
Resolved issue 2722: Execute Script does not correctly convert document.all into JSON format [[Pri-3]]
Resolved issue 2681: ChromeDriver doesn't differentiate "no such element" and "stale element reference" [[Pri-3]] ----------ChromeDriver v2.45 (2018-12-10)---------- Supports Chrome v70-72 Resolved issue 1997: New Session is not spec compliant [[Pri-1]] Resolved issue 2685: Should Assert that the chrome version is compatible [[Pri-2]] Resolved issue 2677: Find Element command returns wrong error code when an invalid locator is used [[Pri-2]] Resolved issue 2676: Some ChromeDriver status codes are wrong [[Pri-2]] Resolved issue 2665: compile error in JS inside of WebViewImpl::DispatchTouchEventsForMouseEvents [[Pri-2]] Resolved issue 2658: Window size commands should handle user prompts [[Pri-2]] Resolved issue 2684: ChromeDriver doesn't start Chrome correctly with options.addArguments("user-data-dir=") [[Pri-3]]
Resolved issue 2688: Status command is not spec compliant [[Pri-3]]
Resolved issue 2654: Add support for strictFileInteractability [[Pri-]]
複製代碼

Selenium 滾動至元素

滾動至元素參考：

blog.csdn.net/sinat_28734…

實現代碼片斷：

// 獲取元素
WebElement element = webDriver.findElement(By.cssSelector(elementsCss));

// 獲取元素左上座標值
Point elementPoint = element.getLocation();
int documentScrollTop = elementPoint.getY();

// 將頁面根據元素滾動至合適位置
jsExecutor.executeScript("window.scrollTo(0," + documentScrollTop + ")");
複製代碼

Selenium等待：顯示，隱式

參考：

huilansame.github.io/huilansame.…

強制等待

sleep(3)  # 強制等待3秒再執行下一步
複製代碼

隱性等待

隱形等待是設置了一個最長等待時間，若是在規定時間內網頁加載完成，則執行下一步，不然一直等到時間截止，而後執行下一步。注意這裏有一個弊端，那就是程序會一直等待整個頁面加載完成，也就是通常狀況下你看到瀏覽器標籤欄那個小圈再也不轉，纔會執行下一步。

# -*- coding: utf-8 -*-
from selenium import webdriver

driver = webdriver.Firefox()
driver.implicitly_wait(30)  # 隱性等待，最長等30秒
driver.get('https://huilansame.github.io')

print driver.current_url
driver.quit()
複製代碼

須要特別說明的是：隱性等待對整個driver的週期都起做用，因此只要設置一次便可，我曾看到有人把隱性等待當成了sleep在用，走哪兒都來一下…

顯性等待

顯性等待，WebDriverWait，配合該類的until()和until_not()方法，就可以根據判斷條件而進行靈活地等待了。它主要的意思就是：程序每隔xx秒看一眼，若是條件成立了，則執行下一步，不然繼續等待，直到超過設置的最長時間，而後拋出TimeoutException。

# -*- coding: utf-8 -*-
from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

driver = webdriver.Firefox()
driver.implicitly_wait(10)  # 隱性等待和顯性等待能夠同時用，但要注意：等待的最長時間取二者之中的大者
driver.get('https://huilansame.github.io')
locator = (By.LINK_TEXT, 'CSDN')

try:
    WebDriverWait(driver, 20, 0.5).until(EC.presence_of_element_located(locator))
    print driver.find_element_by_link_text('CSDN').get_attribute('href')
finally:
    driver.close()
複製代碼

Selenium定位元素後誤差

這是一個奇怪的問題，之因此會出現這個座標誤差是由於windows系統下電腦設置的顯示縮放比例形成的，location獲取的座標是按顯示100%時獲得的座標，而截圖所使用的座標倒是須要根據顯示縮放比例縮放後對應的圖片所肯定的，所以就出現了誤差。

解決這個問題有三種方法：

1.修改電腦顯示設置爲100%。這是最簡單的方法；

2.縮放截取到的頁面圖片，即將截圖的size縮放爲寬和高都除以縮放比例後的大小；

3.修改Image.crop的參數，將參數元組的四個值都乘以縮放比例。

Selenium加載Flash

看服務報告pc端截圖重構內ChromeUtil.java如何使用

問題答案裏提供了不少解決思路：

stackoverflow.com/questions/5…

網上方案：

prefs.put("profile.default_content_setting_values.plugins", 1);
prefs.put("profile.content_settings.plugin_whitelist.adobe-flash-player", 1);
prefs.put("profile.content_settings.exceptions.plugins.*,*.per_resource.adobe-flash-player", 1);
複製代碼

經測試Chrome65+沒法使用，無效。

方法一

基本思路：經過Selenium自動訪問chrome單個網頁的設置頁，操做元素，始終容許加載flash。

讓Selenium自動選擇下面的按鈕

這個操做的Demo代碼：

package util;

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.Select;

import java.io.File;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class ChromeUtil {

    /**
     * 格式化url進入該url設置頁
     * @param url
     * @return
     */
    private static String _base_url(String url){
        if (url.isEmpty()){
            return url;
        }

        try {
            URL urls = new URL(url);
            return String.format("%s://%s",urls.getProtocol(),urls.getHost());
        }catch (Exception e){
            return url;
        }
    }

    /**
     * 元素選擇
     * @param driver
     * @param element
     * @return
     */
    private static WebElement _shadow_root(WebDriver driver, WebElement element){
        return (WebElement)((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", element);
    }

    /**
     * 容許網頁的flash運行，chrome67版本可行，75版本提示升級flash
     * @param driver
     * @param url
     */
    public static void allow_flash(WebDriver driver, String url) {
        url = _base_url(url);
        driver.get(String.format("chrome://settings/content/siteDetails?site=%s",url));
        WebElement webele_settings = _shadow_root(driver,(((ChromeDriver)driver).findElementByTagName("settings-ui")));
        WebElement webele_container = webele_settings.findElement(By.id("container"));
        WebElement webele_main = _shadow_root(driver,webele_container.findElement(By.id("main")));
        WebElement showing_subpage = _shadow_root(driver,webele_main.findElement(By.className("showing-subpage")));
        WebElement advancedPage = showing_subpage.findElement(By.id("advancedPage"));
        WebElement settings_privacy_page = _shadow_root(driver,advancedPage.findElement(By.tagName("settings-privacy-page")));
        WebElement pages = settings_privacy_page.findElement(By.id("pages"));
        WebElement settings_subpage = pages.findElement(By.tagName("settings-subpage"));
        WebElement site_details = _shadow_root(driver,settings_subpage.findElement(By.tagName("site-details")));
        WebElement plugins = _shadow_root(driver,site_details.findElement(By.id("plugins")));
        WebElement permission = plugins.findElement(By.id("permission"));
        Select sel = new Select(permission);
        sel.selectByValue("allow");
    }

    /**
     * @param args
     */
    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", Constants.PATH_Dict.DRIVER_PATH.getValue());
        WebDriver webDriver = null;
        try {
            // 初始化webDriver
            ChromeOptions options = new ChromeOptions();
            // options.addArguments("--headless"); // 無頭模式
            // options.addArguments("--no-sandbox"); // Linux關閉沙盒模式
            // options.addArguments("--disable-gpu"); // 禁用顯卡
            webDriver = new ChromeDriver(options);
            webDriver.manage().window().setSize(new Dimension(1300, 800));
            String url = "https://shanghai.fang.anjuke.com/";

            // 獲取重定向後網址再打開Flash權限
            webDriver.get(url);
            allow_flash(webDriver,webDriver.getCurrentUrl());
            webDriver.get(url);
            Thread.sleep(1 * 60 * 1000);


        } catch(Exception e) {
            e.printStackTrace();
        } finally {
            if(webDriver != null) {
                webDriver.quit();
            }
        }
    }
}
複製代碼

方法二

在chrome設置裏將全部網站加入flash白名單，但實測selenium會打開新的chrome，不讀取通用設置，相似無痕窗口，有空再試試。

總結

• 全局flash加載的設置按鈕在selenium不起做用
• 使用pref加載也沒有用

禁止javascript

禁止運行javascript仍是能夠經過pref的：

HashMap<String, Object> chromePrefs = new HashMap<>(2);
chromePrefs.put("profile.managed_default_content_settings.javascript", 2);
options.setExperimentalOption("prefs", chromePrefs);
複製代碼

Selenium調整網頁縮放大小

運行js

document.body.style.zoom='0.5'
複製代碼

關注我

我目前是一名後端開發工程師。主要關注後端開發，數據安全，網絡爬蟲，物聯網，邊緣計算等方向。

微信：yangzd1102

Github：@qqxx6661

我的博客：

• CSDN：@Rude3Knife
• 知乎：@Zhendong
• 簡書：@蠻三刀把刀
• 掘金：@蠻三刀把刀

原創博客主要內容

• Java知識點複習全手冊
• Leetcode算法題解析
• 劍指offer算法題解析
• SpringCloud菜鳥入門實戰系列
• SpringBoot菜鳥入門實戰系列
• Python爬蟲相關技術文章
• 後端開發相關技術文章

我的公衆號：Rude3Knife

若是文章對你有幫助，不妨收藏起來並轉發給您的朋友們~