javascript - Selenium 仅加载 JavaScript 而不是完整的 HTML - Python
问题描述
我正在尝试在此链接中找到搜索栏:https://www.takealot.com使用“搜索字段”类来自:
input class="search-field" type="text" placeholder="搜索产品、品牌..." value=""
我的代码:
from selenium import webdriver
import time
driver = webdriver.Firefox()
driver.get("https://www.takealot.com/")
print(driver.page_source)
time.sleep(100)
driver.quit()
我已将睡眠设置为 100,希望 HTML 需要很长时间才能加载,但我似乎只得到以下输出:
<html dir="ltr" lang="en"><head>
<link rel="preload" href="https://shopfront.takealot.com/static/js/app-loader.js" as="script">
<link rel="preconnect" href="//media.takealot.com" crossorigin="">
<link rel="preconnect" href="https://shopfront.takealot.com" crossorigin="">
<link rel="preconnect" href="//api.takealot.com" crossorigin="">
<link rel="preconnect" href="//static.takealot.com" crossorigin="">
<title>Takealot.com: Online Shopping | SA's leading online store</title>
<link rel="shortcut icon" href="https://www.takealot.com/favicon.ico?20110717" type="image/x-icon">
<meta property="twitter:account_id" content="4503599630296419">
<meta name="description" content="South Africa's leading online store. Fast, reliable delivery to your door. Many ways to pay. Shop anything you can imagine: TVs, laptops, cellphones, kitchen appliances, toys, books, beauty & more. Shop the mobile app anytime, anywhere." data-react-helmet="true"><link rel="canonical" href="https://www.takealot.com/" data-react-helmet="true"><link rel="alternate" media="handheld" href="https://m.takealot.com/" data-react-helmet="true"><link rel="alternate" href="android-app://fi.android.takealot/app/takealot.com/home" data-react-helmet="true"><meta name="robots" content="INDEX,FOLLOW" data-react-helmet="true"><meta property="og:site_name" content="Takealot.com" data-react-helmet="true"><meta property="og:title" content="Takealot.com: Online Shopping | SA's leading online store" data-react-helmet="true"><meta property="og:description" content="South Africa's leading online store. Fast, reliable delivery to your door. Many ways to pay. Shop anything you can imagine: TVs, laptops, cellphones, kitchen appliances, toys, books, beauty & more. Shop the mobile app anytime, anywhere." data-react-helmet="true"><meta property="og:image" content="https://www.takealot.com/static/images/logo_transparent.png" data-react-helmet="true"><script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.takealot.com",
"name": "Takealot.com",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.takealot.com/all/?qsearch={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html, body {
background-color: #f4f4f4;
}
.sf {
min-height: 400px;
}
</style>
<link href="https://shopfront.takealot.com/56ef9861e86851c6e164b4f9ac61aaf391be03e0/static/js/runtime-752252ceefc11a26036e.js" rel="preload" as="script"><link href="https://shopfront.takealot.com/56ef9861e86851c6e164b4f9ac61aaf391be03e0/static/js/vendors~app-79405fe02e9a75a07916.js" rel="preload" as="script"><link href="https://shopfront.takealot.com/56ef9861e86851c6e164b4f9ac61aaf391be03e0/static/js/app-0aaac12d85774ebc557d.js" rel="preload" as="script"><script src="https://shopfront.takealot.com/56ef9861e86851c6e164b4f9ac61aaf391be03e0/static/js/runtime-752252ceefc11a26036e.js"></script></head>
<body id="body">
<div class="sf " id="shopfront-app"><style>
@keyframes load-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes load8 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.appload-wrapper {
animation: load-in 200ms linear;
box-sizing: border-box;
height: 100%;
min-height: 300px;
position: relative;
transform: translateZ(0);
}
.apploader {
animation: load8 .8s infinite linear;
border-bottom: 3px solid rgba(77, 77, 79, .2);
border-left: 3px solid #0b79bf;
border-radius: 50%;
border-right: 3px solid rgba(77, 77, 79, .2);
border-top: 3px solid rgba(77, 77, 79, .2);
box-sizing: border-box;
display: block;
font-size: 10px;
height: 30px;
left: calc(50% - 15px);
position: absolute;
text-indent: -9999em;
top: calc(50% - 15px);
transform: translateZ(0);
width: 30px;
}
.apploader::after {
border-radius: 50%;
box-sizing: border-box;
height: 30px;
width: 30px;
}
</style>
<div class="appload-wrapper">
<div class="apploader"></div>
</div></div>
<script src="https://shopfront.takealot.com/static/js/app-loader.js" onload="window.loadShopfront('https://shopfront.takealot.com');" type="text/javascript">
</script>
</body></html>
解决方案
在搜索字段中设置值 Induce WebDriverWait
() 并等待element_to_be_clickable
() 并使用下面的 css 选择器。
driver.get("https://www.takealot.com/")
WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.CSS_SELECTOR,"input.search-field"))).send_keys("USB")
您需要导入以下库。
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
要了解有关WebDriverWait
此链接的更多信息,请参阅ExplicitWait
推荐阅读
- reactjs - 无法在 Next.js 中使用全局 scss,消息全局 CSS 无法从您的自定义文件以外的文件导入
- azure - .NET Core API 将无法在 Azure 应用服务上运行 - 您要查找的资源已被删除、名称已更改或暂时不可用
- c# - C# - 上下文短信回复
- c++ - 如何在 32 个字母数字字符串中添加连字符
- linux - 有没有办法在 Rust 中以跨平台的方式用新进程替换当前进程?
- amazon-web-services - elasticsearch cloudformation yaml文件不起作用
- c# - 如何与列表中的重音字母进行交互
? - ios - ios 13.4 中的 admob 可能会出现崩溃
- c++ - 修复 C++ 项目中未找到标识符的错误
- sqlite - 如何在 .Net Core 中将内存流或字节数组转换为 SqlLite DB?