登录 Mobile01 截图下载

Mobile01 是非常知名的网络论坛，专门讨论各种移动电话、移动设备、3C 等产品，这篇文章会使用 Python 的 Selenium 函数库，破解 Mobile01 针对“登录”的反爬虫机制，实作可以自动登录的爬虫，并在登录后对网页进行截图，并储存截图的图片。

执行 selenium 会启动 chromedriver，所以所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda ) 。

分析 Mobile01 登录页面结构

用 Chrome 打开 Mobile01 的网页。

Mobil101：https://www.mobile01.com/

将鼠标移动至右上方的“登录/注册”的位置，按下右键，选择“检查”。

打开 Chrome 开发者工具后，可以看见“登录/注册”位于一个 class 为 c-login 的 div 里，先找个空白的记事本或用手写的方式，将这个 class 名称纪录下来 ( 因为没有 id，所以使用 class )。

用鼠标点击“登录/注册”按钮，打开登录页面，再将鼠标移动至“登录”的字段，按下右键，选择“检查”。

从 Chrome 开发者工具寻找下列的程序码片段，记录登录时 email 字段的 id、密码字段的 id。

重复同样步骤，找出并记录登录按钮的 id。

尝试自动登录 Mobile01

建立一个 python 文件，使用 selenium 函数库，点击 Mobile01 首页右上方的“注册/登录”按钮。

参考：Selenium 函数库 - 尝试自动登录 Mobile01

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome('./chromedriver')
driver.get('https://www.mobile01.com/')
loginBtn = driver.find_element(By.CSS_SELECTOR, 'a.c-login')   # 透過 class 取得登入按鈕
loginBtn.click()   # 點擊登入按鈕

执行程序后，虽然打开了 Mobile01 网页，但自动点击按钮后会出现下方的画面，表示 Mobile01 有针对自动登录的机器人进行反爬虫的保护机制。

破解 Mobile01 反爬虫登录

由于手动登录 Mobile01 时，并没有验证码之类的机制，所以可以先猜测是使用“浏览器 Header 信息”或“window.navigator”的反爬虫策略，因此可将程序码改写如下，程序执行后，就可以顺利打开登录的页面。

参考：破解反爬虫的方法

from selenium import webdriver
from selenium.webdriver.common.by import By

user_agent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15"
opt = webdriver.ChromeOptions()
opt.add_argument('--user-agent=%s' % user_agent)    # 加入瀏覽器 Header 資訊
driver = webdriver.Chrome('./chromedriver', options=opt)
# 清空 window.navigator
driver.execute_cdp_cmd("Page.addScriptToEvaluateOnNewDocument", {
  "source": """
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    })
  """
})
driver.get('https://www.mobile01.com/')
loginBtn = driver.find_element(By.CSS_SELECTOR, 'a.c-login')
loginBtn.click()

能够进入登录页面后，就能够过 ActionChains 的方式，依序将登录的 email 与密码填入对应的字段，输入完成后点击登录的按钮。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains  # 載入函式庫
from time import sleep    # 載入函式庫

user_agent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15"
opt = webdriver.ChromeOptions()
opt.add_argument('--user-agent=%s' % user_agent)
driver = webdriver.Chrome('./chromedriver', options=opt)
driver.execute_cdp_cmd("Page.addScriptToEvaluateOnNewDocument", {
  "source": """
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined
    })
  """
})
driver.get('https://www.mobile01.com/')
loginBtn = driver.find_element(By.CSS_SELECTOR, 'a.c-login')
loginBtn.click()

sleep(0.5)     # 按下按鈕後，等待 0.5 秒等待頁面開啟
regEmail = driver.find_element(By.CSS_SELECTOR, '#regEmail')        # 取得 email 欄位
regPassword = driver.find_element(By.CSS_SELECTOR, '#regPassword')  # 取得密碼欄位
submitBtn = driver.find_element(By.CSS_SELECTOR, '#submitBtn')      # 取得登入按鈕
actions = ActionChains(driver)
actions.click(regEmail).send_keys('你的 email').pause(0.5)   # 點擊欄位，輸入 email
actions.click(regPassword).send_keys('你的密碼').pause(0.5)   # 點擊欄位，輸入密碼
actions.click(submitBtn)      # 點擊登入按鈕
actions.perform()             # 執行 ActionChains

执行程序后，会看见 email 和密码的字段都会自动输入内容，但是却“无法自动点击”登录按钮，这时发现可能是有做类似“用户体验”的保护 ( 或浏览器本身的机制 )，当按钮在浏览画面之外的时候，就无法进行点击，因此在程序里额外“加入卷动视窗卷轴”的功能，让登录按钮露出，就能够顺利的进行点击，点击后，就能顺利登录 Mobile01。

注意，由于 ActionChains 函数库的 reset_actions() 有 bug，无法清空纪录的动作，因此必须先卷动视窗，再进行输入与点击的动作。

driver.execute_script(f'window.scrollTo(0, 200)')   # 預先加入往下捲動 200px 的程式
actions.click(regEmail).send_keys('你的 email').pause(0.5)
actions.click(regPassword).send_keys('你的密碼').pause(2)
actions.click(submitBtn)
actions.perform()

登录 Mobile01 后截图并储存

在程序的最下方，加入下面这段程序码，执行后，当自动点击登录按钮后，等待两秒 ( 等待网页加载 )，就会将整个 HTML 里 body 的内容进行截图，并储存到同一个文件夹内。

sleep(2))
body = driver.find_element(By.CSS_SELECTOR, 'body')   # 取得 body
body.screenshot('./a1.png')   # 截圖並儲存

小结

Mobile01 的反爬虫只是基本的反爬虫机制，只要了解原理，仍然可以让爬虫进行自动登录的作业，搭配截图就也能够不断用图片记录某些关注的内容 ( 凡走过必留下痕迹的概念 )。

意见反馈