为什么请求返回的HTML与实际页面的HTML不同？

Question

我正在尝试刮取一个网页以获取一些数据，我想要刮取的其中一个网页是这个https://www.etoro.com/people/sparkliang/portfolio，当我使用以下方法刮取网页时，会出现问题：

import requests

h=requests.get('https://www.etoro.com/people/sparkliang/portfolio')
h.content

并给我一个与原始HTML完全不同的结果，例如添加了很多元类，删除了我正在搜索的文本或类型HTML变量

例如，假设我想刮：

<p ng-if=":: item.IsStock" class="i-portfolio-table-hat-fullname ng-binding ng-scope">Shopify Inc.</p>

我使用如下命令：

    from bs4 import BeautifulSoup

    import requests

    html_text = requests.get('https://www.etoro.com/people/sparkliang/portfolio').text
    print(html_text)

    soup = BeautifulSoup(html_text,'lxml')

    job = soup.find('p', class_='i-portfolio-table-hat-fullname ng-binding ng-scope').text
    

这将使我返回Shopify公司。 但这并不是因为从带有请求库的网页中加载或获取的html代码，使我获得了另一个完全不同的html

我想知道如何从网页中获取原始html代码。 如果使用cntl-f搜索关键字，比如Shopify Inc，它甚至不会出现在我从请求python库获得的代码中

Answer 1

这是因为页面使用动态javascript创建DOM元素。因此，您将无法使用请求来完成它。相反，您应该将selenium与webdriver一起使用，并等待创建元素后再进行抓取

您可以尝试下载ChromeDriver可执行文件here。如果将其粘贴到与脚本相同的文件夹中，则可以运行：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import os

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument(" window-size=1920x1080")
chrome_options.add_argument(" headless")
chrome_driver = os.getcwd() + "\\chromedriver.exe" # CHANGE THIS IF NOT SAME FOLDER
driver = webdriver.Chrome(options=chrome_options, executable_path=chrome_driver)

url = 'https://www.etoro.com/people/sparkliang/portfolio'
driver.get(url)
html_text = driver.page_source

jobs = WebDriverWait(driver, 20).until(
    EC.presence_of_all_elements_located((By.CSS_SELECTOR, 'p.i-portfolio-table-hat-fullname'))
)
for job in jobs:
    print(job.text)

在这里，我们将selenium与WebDriverWait和EC结合使用，以确保在我们试图获取所需信息时，所有元素都将存在

输出

Facebook
Apple
Walt Disney
Alibaba
JD.com
Mastercard
...