title: Cypress: How to test that content is *not* accessible (clickable etc) because of overlay?
body: <p>I have implemented a loading indicator in Angular that looks like this:</p>
  <pre><code>&lt;div cdkTrapFocus class=&quot;activity-indicator-container&quot;&gt;
    &lt;div class=&quot;content-container&quot;&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;div [ngStyle]=&quot;{visibility: showLoader ? 'visible': 'hidden'}&quot; class=&quot;indicator-overlay&quot;&gt;
        &lt;div class=&quot;loading-indicator&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The <code>indicator-overlay</code> is styled like that:</p>
  <pre><code>  .indicator-overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.35);
  }
  </code></pre>
  <p>When the indicator is displayed, the content is greyed out by a semi-transparent div.</p>
  <p>Running <code>cy.contains('text in content').should('not.be.visible')</code> fails when the overlay is displayed.</p>
  <p>So is there a way to test in Cypress that the text is actually <em>not accessible</em> (selectable, clickable etc)?</p>