title: Get text from series of elements to an array using cypress JS
body: <p>I'm trying to get comma separated text from series of <code>&lt;th&gt;</code> elements in a table row. I tried to use element<code>.each()</code> method for 3 nested loops from Cypress and it was super slow and was throwing error (<code>cy.click()</code> failed because this element is detached from the DOM.) sporadically in different test levels (Sometimes passed without any issue). I assume this might be due to large number of unnecessary loops to capture values with the above mentioned method.</p>
  <p>Code</p>
  <pre><code>const verifyLeaderBoard = () =&gt; {
      let ClassName;
      let clickedElement;
      LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) =&gt; {
          cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) =&gt; {
              ClassName = TeeTimeTableRowClass || 'Empty';
              cy.wait(10).then(() =&gt; {
                  if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                      cy.wait(5).then(() =&gt; {
                          LeaderBoard.inputFields('playerserach').focus().wait(100);
                      }).then(() =&gt; {
                          cy.wrap($rowelements).click({ force: true }).wait(1000);
                          clickedElement = $rowelements;
                      })
                  } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                      cy.wait(10).then(() =&gt; {
                          cy.wrap($rowelements).xpath('.//div[@class=&quot;table-responsive-xl&quot;]//table[@class=&quot;table score-table&quot;]//thead//tr')
                              .each(($HoleandParElement, index, $list) =&gt; {
                                  cy.wrap($HoleandParElement).xpath('.//th')
                                      .each(($HoleandParElementtabledata, index, $list) =&gt; {
                                          cy.wrap($HoleandParElementtabledata).invoke('text')
                                              .then(texts =&gt; {
                                                  console.log(texts)
                                              })
                                      })
                              })
                      }).then(() =&gt; {
                          cy.wrap(clickedElement).click({ force: true }).wait(100);
                      })
                  }
              })
          })
      })
  }
  </code></pre>
  <p>Error</p>
  <p><a href="https://i.stack.imgur.com/DzLto.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DzLto.png" alt="enter image description here" /></a></p>
  <p>Its working fine without the error if I just skip final element<code>.each()</code> as follows.</p>
  <p>Code</p>
  <pre><code>const verifyLeaderBoard = () =&gt; {
      let ClassName;
      let clickedElement;
      LeaderBoard.elementCollections('rows').each(($rowelements, indexrow, $list) =&gt; {
          cy.wrap($rowelements).invoke('attr', 'class').then((TeeTimeTableRowClass) =&gt; {
              ClassName = TeeTimeTableRowClass || 'Empty';
              cy.wait(10).then(() =&gt; {
                  if ((ClassName.indexOf('accordion-toggle') !== -1)) {
                      cy.wait(5).then(() =&gt; {
                          LeaderBoard.inputFields('playerserach').focus().wait(100);
                      }).then(() =&gt; {
                          cy.wrap($rowelements).click({ force: true }).wait(1000);
                          clickedElement = $rowelements;
                      })
                  } else if ((ClassName.indexOf('hidden-row-wrap') !== -1)) {
                      cy.wait(10).then(() =&gt; {
                          cy.wrap($rowelements).xpath('.//div[@class=&quot;table-responsive-xl&quot;]//table[@class=&quot;table score-table&quot;]//thead//tr')
                              .each(($HoleandParElement, index, $list) =&gt; {
                                  cy.wrap($HoleandParElement).invoke('text')
                                      .then(texts =&gt; {
                                          console.log(texts)
                                      })
                              })
                      }).then(() =&gt; {
                          cy.wrap(clickedElement).click({ force: true }).wait(100);
                      })
                  }
              })
          })
      })
  }
  </code></pre>
  <p>But in this case all the data in separate <code>&lt;th&gt;</code> tags are merged without a single space (Not possible to split by a string)</p>
  <p><a href="https://i.stack.imgur.com/ptbDG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ptbDG.png" alt="enter image description here" /></a></p>
  <p>I'm searching for a solution to capture all the texts in <code>&lt;th&gt;</code> tags with a special character to divide each value.</p>
  <p>HTML Structure</p>
  <p><a href="https://i.stack.imgur.com/HwWLi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HwWLi.png" alt="enter image description here" /></a></p>