typescript 如何单击第二个无序列表(ul)中的第二个列表项(li)?

olmpazwi  于 2023-03-31  发布在  TypeScript
关注(0)|答案(1)|浏览(198)

这是我想测试的网页页脚元素。

<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 &amp; 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

谁能告诉我如何为我的案例编写正确的代码?

kjthegm6

kjthegm61#

错误是Target closed,因为您没有等待unorderedList.click();
所以测试继续,关闭浏览器,你的点击失败。
你也不需要await作为定位器。对于选择器,你可以使用Playwright的:nth-match。
本例将选取第二个.footer-menu元素,然后选取第三个a元素。

const unorderedList = page.locator(
  ":nth-match(.footer-menu, 2) >> :nth-match(a, 3)"
);
await unorderedList.click();

相关问题