这是我想测试的网页页脚元素。
<footer id="main-footer" class="section-footer mt-5 border-top">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<h4>Solutions</h4>
<ul class="footer-menu footer-menu-product list-unstyled">
<li><a href="/solution/managed-services">Managed Services</a></li>
<li><a href="/solution/adoption-migration">Adoption/Migration*</a></li>
<li><a href="/solution/cloud-optimization">Cloud Optimization</a></li>
<li><a href="/solution/cloud-strategy">Cloud Strategy</a></li>
<li><a href="/solution/consulting">Consulting</a></li>
<li><a href="/solution/backup">Backup</a></li>
<li><a href="/solution/load-balancing">Load Balancing</a></li>
<li><a href="/solution/disaster-recovery">Disaster Recovery</a></li>
<li><a href="/solution/content-delivery-network-cdn">Content Delivery Network (CDN)</a></li>
<li><a href="/solution/web-application-firewall-waf">Web Application Firewall (WAF)</a></li>
<li><a href="/solution/data-replication">Data Replication*</a></li>
<li><a href="/solution/document-management">Document Management</a></li>
<li><a href="/solution/anti-virus">Anti Virus</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h4>Platforms</h4>
<ul class="footer-menu footer-menu-product list-unstyled">
<li><a href="/platform/amazon-web-service">Amazon Web Service</a></li>
<li><a href="/platform/azure">Microsoft Azure</a></li>
<li><a href="/platform/cloud">Cloud</a></li>
<li><a href="/platform/odoo">Odoo</a></li>
<li><a href="/platform/ave-point">AvePoint</a></li>
<li><a href="/platform/microsoft-365">Microsoft 365</a></li>
<li><a href="/platform/google-workspace">Google Workspace</a></li>
<li><a href="/platform/acronis">Acronis</a></li>
<li><a href="/platform/exchange">Microsoft Exchange</a></li>
<li><a href="/platform/c-panel">cPanel</a></li>
<li><a href="/platform/plesk">Plesk</a></li>
<li><a href="/platform/share-point">Microsoft SharePoint</a></li>
<li><a href="/platform/teams">Microsoft Teams</a></li>
<li><a href="/platform/kemp-load-balancing-waf">KEMP</a></li>
</ul>
</div>
<div class="col-12 col-md-12 col-lg-4">
<div class="row">
<div class="col-12 col-md-6 col-lg-12">
<h4>Resources & Insight</h4>
<ul class="footer-menu list-unstyled">
<li><a href="/articles">Articles</a></li>
<li><a href="/videos">Videos</a></li>
<li><a href="/promos">Promos</a></li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-12">
<h4>Company</h4>
<ul class="footer-menu list-unstyled">
<li><a href="/about">About</a></li>
<li><a href="/sla">SLA</a></li>
<li><a href="/acceptable-usage-policy">Acceptable Usage Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-4 w-100 d-flex flex-column flex-md-row flex-wrap flex-md-nowrap">
<div class="footer-logo"><img src="/asset/logo/footer_logo.png" alt="Logo"></div>
<div class="mt-3 mt-md-0 footer-company flex-shrink-1">
<h1 class="mb-0">
2009 - <!-- -->2023<!-- --> System Indonesia
</h1>
<p class="mb-0"> System Indonesia is a registered trademark</p>
</div>
<div class="mt-4 mt-md-0 ms-0 ms-md-auto text-start text-md-end">
<ul class="footer-social list-unstyled mb-1">
<li><a href="http://instagram.com/" target="_blank" rel="noreferrer"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="http://facebook.com" target="_blank" rel="noreferrer"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="http://twitter.com" target="_blank" rel="noreferrer"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="https://open.spotify.com" target="_blank" rel="noreferrer"><i class="fa-brands fa-spotify"></i></a></li>
<li><a href="https://www.youtube.com" target="_blank" rel="noreferrer"><i class="fa-brands fa-youtube"></i></a></li>
</ul>
<ul class="footer-link list-unstyled mb-0">
<li><a href="/terms-of-service">Terms of Service</a></li>
<li><a href="/privacy-policy">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</footer>
我们的目标只是点击每个ul的前3个li,然后一个接一个地出现,然后期待直接链接,
但是当我试图点击第二个ul里面的第二个li时,我不明白这个错误。
守则:
await page.waitForSelector(".footer-menu", {timeout: 10000})
const unorderedList = await page.locator('.footer-menu:nth-child(1) li:nth-child(2)');
unorderedList.click();
错误
Running 1 test using 1 worker
1) [chromium] › footer-try.spec.ts:3:5 › has title ───────────────────────────────────────────────
locator.click: Target closed
=========================== logs ===========================
waiting for locator('.footer-menu:nth-child(1) li:nth-child(2)')
============================================================
9 | const unorderedList = await page.locator('.footer-menu:nth-child(1) li:nth-child(2)');
10 |
> 11 | unorderedList.click();
| ^
12 |
13 | // class=""
14 |
at D:\PKL\Playwright\Test WebInter\playwright.web.id\tests\footer-try.spec.ts:11:17
Test timeout of 0ms exceeded while tearing down "context".
1 failed
[chromium] › footer-try.spec.ts:3:5 › has title
谁能告诉我如何为我的案例编写正确的代码?
1条答案
按热度按时间kjthegm61#
错误是
Target closed
,因为您没有等待unorderedList.click();
。所以测试继续,关闭浏览器,你的点击失败。
你也不需要
await
作为定位器。对于选择器,你可以使用Playwright的:nth-match。本例将选取第二个
.footer-menu
元素,然后选取第三个a
元素。