title: Cypress: create an it test foreach element of an array
body: <p>I have an array of strings, which are links to different pages of the same website; for each of these webpages, i perform several tests upon it, and for each page I iterate on different HTML blocks of the page (all the pages have the same block ids).</p>
  <p>For example, I have 10 pages that describes 10 different cities; all the pages have 9 identical html blocks with same id (they all comes from the same template). I check if there are several words inside each of those ids.</p>
  <p>I actually did it; what I need to do is to create an it test for each element. I'll try to explain better.</p>
  <p>There are a series of arrays in the main object, so I have an <code>urls</code> object like:</p>
  <pre><code>urls: {
      cities: [...],
      secondArr: [...],
      thirdArr: [...]
  }
  </code></pre>
  <p>I'm interested in the <code>urls.cities</code> array.</p>
  <p>This is an object of the array of cities:</p>
  <pre><code>urls.cities: [{
          city: &quot;Miami&quot;
          discipline: &quot;no-discipline&quot;
          type: &quot;main&quot;
          url: &quot;https://myWebsite.com/miami/&quot;
      }, 
      ...]
  </code></pre>
  <p>I did something like that: main.test.js</p>
  <pre><code>it('should retrieve generated pages', () =&gt; {
  
      [...]
  
      // executing tests for cities
      urls.cities.forEach(elem =&gt; {
        cy.visit(elem.url)
  
        let ids = idsInAllPages   // there's a const idsInAllPages = ['id1', 'id2', ...] on top of the code
        ids.forEach(id =&gt; {
          // i get the webelement matching the id, with cypress
          cy.get(id).then(webElem =&gt; {
            checkAllWebElementsOfCityUrl(webElem, elem, id)
          })
        })
      })
  })
  </code></pre>
  <p>In the <code>checkAllWebElementsOfCityUrl()</code> function I do several stuff, included a <code>forEach</code> loop to test each html block code (if needed I can add the code, it's a bit long to explain anyway because i take words to check from a JSON file and compare them with what's inside the html block).</p>
  <p>Everything works fine, but my problem is that it's a single <code>it('...')</code> block: so if an error is found, all subsequent tests are not done.</p>
  <p>So, I need to create an <code>it</code> test <code>forEach</code> element of the array.</p>
  <p>Something like</p>
  <pre><code>it('should retrieve generated pages', () =&gt; {
  
      [...]
  
      // executing tests for cities
      urls.cities.forEach(elem =&gt; {
        it('should test a city', () =&gt; {
          cy.visit(elem.url)
  
          let ids = idsInAllPages
          ids.forEach(id =&gt; {
            cy.get(id).then(webElem =&gt; {
              webpageshelp.checkAllWebElementsOfCityUrl(webElem, elem, id)
            })
          })
        })
      })
  })
  </code></pre>
  <p>But this code does not work, it skips entirely the it test inside loop.
  Is there any way to do it?</p>
  <p><strong>UPDATE:</strong></p>
  <p>i did not mention it before, but I discovered that the above code works.
  My issue was that, since I had to retrieve the urls list from an online XML file and convert it to an object (object <code>urls</code> described above), I wrapped all the code inside a request, followed by a <code>.then()</code>, like</p>
  <pre><code>cy.request('https://myWebsite.com/urlslist.xml').then(
  urls =&gt; {
      urls.cities.forEach(elem =&gt; {
            it('should test a city', () =&gt; {
              cy.visit(elem.url)
            })
      })
  })
  </code></pre>
  <p>Changing <code>cy.request</code> with whatever you want to retrieve the file, you always end up in a <code>.then()</code> block, even using <code>cy.task</code>.</p>
  <p>NOR using the <code>before()</code> block can help, because there is NOT ANY WAY to bring data outside of the <code>before()</code> and inside the <code>describe()</code> block (not an <code>it()</code> block).</p>
  <p>I finally found a solution, I will post down this page.</p>