<p dir="auto">When I have a line in my test that fails when something doesn't go right with a page selector, I'd like to know exactly what selector failed. If my selector is composed using a template string, I want to know what the final string was, not the name of the variable I interpolated.</p>
<p dir="auto">For example with this error message:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13558253/142895617-c0d9a77a-ec80-44a3-a6bb-0738290ac27b.png"><img src="https://user-images.githubusercontent.com/13558253/142895617-c0d9a77a-ec80-44a3-a6bb-0738290ac27b.png" alt="2021-11-22_11-08" style="max-width: 100%;"></a></p>
<p dir="auto">One question I have is, was something wrong with the <code class="notranslate">duplicateName</code> variable I interpolated ? If I could have the information about which selector failed above the failed line printout, then I could determine that much more quickly.</p>
<p dir="auto">For example if my variable was <code class="notranslate">duplicateName: 'My Duplicate'</code> then I could receive the error message:</p>
<div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Expected locator &quot;text=My Duplicate&quot; to be visible."><pre class="notranslate"><span class="pl-c1">Expected locator "text=My Duplicate" to be visible.</span></pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.35.0]</li>
<li>Operating System: [All]</li>
<li>Browser: [All]</li>
</ul>
<h3 dir="auto">Source code</h3>
<p dir="auto">widgetLoadingContainer - Locator of an UI element (could be single or many)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="public async waitLoadersHidden() {
        try {
            await this.widgetLoadingContainer.first().waitFor();
        } catch (error) {}

        for (const dot of await this.widgetLoadingContainer.all()) {
            await dot.waitFor({ state: 'hidden' });
        }
    }"><pre class="notranslate"><code class="notranslate">public async waitLoadersHidden() {
        try {
            await this.widgetLoadingContainer.first().waitFor();
        } catch (error) {}

        for (const dot of await this.widgetLoadingContainer.all()) {
            await dot.waitFor({ state: 'hidden' });
        }
    }
</code></pre></div>
<p dir="auto">Here we wait for first element is visible (default action time = 5 seconds)<br>
Once first element is 'visible' -&gt; we take all of them and wait each one has 'hidden' state immediately<br>
If element wasn't 'visible' during 5 seconds -&gt; we take all of them and wait each one has 'hidden' state<br>
Sometimes element(s) is not visible and it's ok.<br>
But in this cases try is failed -&gt; the step is also marked as 'failed' in the reporting (when by fact it's passed).</p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>[Run a test with step that has failed action/verification surrounding with try/catch block]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">The step is marked as <strong>passed</strong></p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">The step is marked as <strong>failed</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/13851264/250066633-93f26edd-7565-434f-ae75-f6b4bb11c529.png"><img src="https://user-images.githubusercontent.com/13851264/250066633-93f26edd-7565-434f-ae75-f6b4bb11c529.png" alt="image" style="max-width: 100%;"></a></p>