Selenium找不到JavaScript生成的元素

Question

所以，我想做的是启动浏览器，获取页面内容(使用渲染的JavaScript(，并使用BeautifulSoup找到我想要的元素，这是我的代码：

from selenium import webdriver
from bs4 import BeautifulSoup as bs4
from selenium.webdriver.support.ui import WebDriverWait
browser = webdriver.Edge()
browser.get('https://www.premierleague.com/match/22721')
element = WebDriverWait(browser, 10)
html=bs4(browser.page_source,'html.parser')
print(html.body.main.find('div',attrs={'class':'mcTabs'}))
browser.quit()

我从打印报表中得到"无">

Answer 1

首先，您的代码中有一个拼写错误：

print(html.body.main.find('div',attrs='class':'mcTabs'}))

应替换为：

print(html.body.main.find('div',attrs={'class':'mcTabs'})) # { is missing

第二件事：

element = WebDriverWait(browser, 10)

是多余的，因为您没有在任何地方使用element。

现在来谈谈问题本身。我对BeautifulSoup不是很熟悉，但我发现的是：

browser.get('https://www.premierleague.com/match/22721')
# wait for element to be present
WebDriverWait(browser, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "div.mcTabs"))) 
# get page source when element is already present
html = bs4(driver.page_source,'html.parser')
print(html.body.main.find('div', attrs={'class':'mcTabs'}).prettify())

解释：您得到的文档的page_source还没有完全准备好，这就是为什么您必须等到div.mcTabs出现在DOM中，然后才能得到page_source。

输出：

<div class="mcTabs">
<section class="mcLatestContainer mcMainTab active" data-ui-args='{"type": "latest"}' data-ui-tab="Latest">
<nav class="tabs" data-built-class="matchLatestContainer" data-script="pl_tabbed" data-tab-class="mcLatestTab" data-tab-wrap=".tabs" data-widget="tabbed-content">
</nav>
<div class="matchLatestContainer">
<nav class="tabs">
<ul class="tablist" role="tablist">
<li class="active" data-tab-index="0" role="tab" tabindex="0">
Latest
</li>
<li data-tab-index="1" role="tab" tabindex="0">
Photos
</li>
</ul>
</nav>
<div class="blogStreamMatchContainer mcLatestTab active" data-tab-aware-default="true" data-ui-tab="Latest">
<div class="preMatchContainer" style="display: none;">
<div class="matchPreviewStreamContainer">
</div>
<p class="noContentAvailableContainer" style="display: none;">
No Content Available
</p>
</div>
<div class="liveMatchContainer" style="">
<section class="matchBlog">
<div class="wrapper">
<div class="mcBlogStream">
<div class="matchReportStreamContainer" data-report-rendered="true">
<header>
<h3 class="subHeader">
Match summary
</h3>
</header>
<div class="wrapper col-12">
<div class="standardArticle">
<p>
Manuel Lanzini scored twice as West Ham United finished the season with a 3-1 win over Everton.
</p>
<p>
The midfielder opened the scoring from the edge of the area on 39 minutes after latching on to Marko Arnautovic's flick of a Cheikhou Kouyate pass.
</p>
<p>
Arnautovic doubled the lead in the 63rd minute with a fierce shot for his 11th goal of the season.
</p>
...