在柏树中找到或未找到 P 元素答案

【问题标题】：P Element found or not in cypress在柏树中找到或未找到 P 元素
【发布时间】：2020-05-12 11:05:55
【问题描述】：

我想检查p标签是否存在于父标签中，目前它找到了p标签，但问题是一些li标签没有p标签，所以它抛出错误。我不需要错误我想知道是否有错误或没有p 标记然后将变量keyValue 设置为false 或者如果有p 元素然后将变量keyValue 设置为其在@987654329 内的文本@标签。

这里是 HTML 代码：

 <ul class="list-inline">
  <li>
    <div class="key-info-icon">
      <span>Sleeps</span> <br /><i class="fi flaticon-sleeps"></i>
    </div>
    <p>6</p>
  </li>
  <li>
    <div class="key-info-icon">
      <span>Bedrooms</span> <br /><i class="fi flaticon-bedrooms"></i>
    </div>
    <p>3 Rooms</p>
  </li>
  <li>
    <div class="key-info-icon">
      <span>Min Nights</span> <br /><i class="fi flaticon-min-nights"></i>
    </div>
    <p>7 (peak)<br />3 (off peak)</p>
  </li>
  <li>
    <div class="key-info-icon">
      <span>Children</span> <br /><i class="fi flaticon-child-friendly"></i>
    </div>
    <p>Yes</p>
  </li>
  <li>
    <div class="key-info-icon">
      <span>WiFi</span> <br /><i class="fi flaticon-wifi"></i>
    </div>
    <p>Yes</p>
  </li>
  <li>
    <div class="key-info-icon">
      <span>Dogs</span> <br /><i class="fi flaticon-dog"></i>
    </div>
    <p>
      Yes <br />
      2 Dogs
    </p>
  </li>
  <li>
    <div class="key-info-icon text-center">
      <span>Access</span> <br /><i class="fi flaticon-stairs"></i>
    </div>
    <p>Stairs</p>
  </li>

  <li>
    <div class="key-info-icon">
      <span>Swimming Pool</span> <br /><i class="fi flaticon-swimming-pool"></i>
    </div>
  </li>
  <li>
    <div class="key-info-icon">
      <span>Log Burner</span> <br /><i class="fi flaticon-logburner"></i>
    </div>
  </li>
</ul>

这是我的柏树代码：

 cy.get(".keyInfo >  ul > li").each(($el, index) => {
    cy.get($el).find("span").as("keyName");
    let keyValue;
    cy.get("@keyName").then(($span) => {
      cy.get($span).parent().siblings();     

      let tempData = {
        [`"${$span.text()}"`]: "test",
      };
      keyTempData.keyInfo.push(tempData);
    });
    data.keyInfo = keyTempData;
  });

知道如何实现吗？ cy.get($span).parent().siblings(); 如果没有 p 标签，则会抛出错误。我也试过cy.get($span).parent().parent().find('p'); 这也在做同样的事情。

【问题讨论】：

标签： node.js testing cypress

【解决方案1】：

我会这样做：

cy.get(".keyInfo > ul > li").each($el => {

  cy.wrap($el).find('.key-info-icon > span').then($span => {
    if ($el.find('p').length) {
      cy.wrap($el).find('p').then($p => {
        keyTempData.keyInfo.push({ [$span.text()]: $p.text() });
      });
    } else {
      keyTempData.keyInfo.push({ [$span.text()]: 'NA' });
    }
  });

});

【讨论】：

好的，我会尽快尝试，现在我已经解决了，如下所示
cy.get(".keyInfo > ul > li").each(($el, index) => { cy.get($el).find("span").as( "keyName"); cy.get("@keyName").then(($span) => { let keyValue = false; cy.get($span) .parent() .parent() .then(($val ) => { if ($val.has("p")) { keyValue = $val.find("p").text(); 让 tempData = { ["${$span.text()}"]: keyValue, }; keyTempData.keyInfo .push(tempData); } }); }); data.keyInfo = keyTempData; });

【解决方案2】：

基本问题是当<p> 不存在时cy.get('p') 会失败，但您可以通过使用Cypress.$ 替换jQuery 表达式来避免这种情况。

本质上，您只是想将<li> 内容映射到键/值对数组中，使用.then() 而不是.each() 更容易做到这一点。

分配给.then() 中的变量可能会出现问题，您可能希望在beforeEach() 中执行此操作或将结果分配给赛普拉斯别名。

cy.get(".keyInfo >  ul > li")
  .then(($els, index) => {

    const keyInfos = $els.map((index, el) => {

      const spanText = Cypress.$(el).find('span').text();

      const pText = Cypress.$(el).find('p').text()
        .replace(/\r?\n|\r/g, ' ')                  // remove <br/>
        .replace(/\s+/g, ' ')                       // remove multiple spaces
        .trim();

      return { [`${spanText}`]: pText || false }
    })
    return keyInfos;
  })
  .as('keyTempData')

cy.get('@keyTempData')
  .then($data => console.log(Array.from($data)))

/*
  0: {Sleeps: "6"}
  1: {Bedrooms: "3 Rooms"}
  2: {Min Nights: "7 (peak)3 (off peak)"}
  3: {Children: "Yes"}
  4: {WiFi: "Yes"}
  5: {Dogs: "Yes 2 Dogs"}
  6: {Access: "Stairs"}
  7: {Swimming Pool: false}
  8: {Log Burner: false}
*/

【讨论】：