<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: [1.16.3]</li>
<li>Operating System: [Mac]</li>
<li>Node.js version: [16.12.0]</li>
<li>Browser: [Chrome]</li>
<li>Extra: [<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1047930313" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/10150" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/10150/hovercard" href="https://github.com/microsoft/playwright/issues/10150">#10150</a>]</li>
</ul>


<p dir="auto">This bug is follow up of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1047930313" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/10150" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/10150/hovercard" href="https://github.com/microsoft/playwright/issues/10150">#10150</a></p>
<p dir="auto">I ran into issues while doing further testing with the suggested approach.</p>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="524783024" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/1" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/playwright/pull/1/hovercard" href="https://github.com/microsoft/playwright/pull/1">#1</a></p>
<p dir="auto">If i have same title in multiple spec files, i get warning message, although i have different spec files, i see this warning when i run the test with suggested approach.<br>
` duplicate test titles are not allowed.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="title: pw1_test test
    test/pw1_test_spec.js:6
    test/pw2_test_spec.js:6
    `"><pre class="notranslate"><code class="notranslate">title: pw1_test test
    test/pw1_test_spec.js:6
    test/pw2_test_spec.js:6
    `
</code></pre></div>
<p dir="auto">Issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="524784715" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/2" data-hovercard-type="pull_request" data-hovercard-url="/microsoft/playwright/pull/2/hovercard" href="https://github.com/microsoft/playwright/pull/2">#2</a></p>
<p dir="auto">storageState in test.use is not respected, if i have different storage states in each spec file, it doesn't load the storageState when the test runs</p>
<p dir="auto">playwright.config</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.js
// @ts-check

/** @type {import('@playwright/test').PlaywrightTestConfig} */
   const config = {
        workers: 1,
        globalTimeout: 0,
        globalSetup: './global-setup.js',
        reporter: [
            ['list']
        ],
        reportSlowTests: null,
        projects: [
            {
            name: 'Test1',
            testDir: './test',
            testMatch: 'sequence1.spec.js',
            retries: 0,
            use: {
                browserName: 'chromium',
                channel: 'chrome',
                headless: false,
                viewport: {width: 1600, height: 825},
                ignoreHTTPSErrors: true,
                trace: &quot;off&quot;,
                screenshot: &quot;only-on-failure&quot;,
                acceptDownloads:true,
            },
        },
        ]

    };
    module.exports = config;"><pre class="notranslate"><span class="pl-c">// playwright.config.js</span>
<span class="pl-c">// <span class="pl-k">@ts</span>-check</span>

<span class="pl-c">/** <span class="pl-k">@type</span> {import('@playwright/test').PlaywrightTestConfig} */</span>
   <span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
        <span class="pl-c1">workers</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
        <span class="pl-c1">globalTimeout</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
        <span class="pl-c1">globalSetup</span>: <span class="pl-s">'./global-setup.js'</span><span class="pl-kos">,</span>
        <span class="pl-c1">reporter</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">[</span><span class="pl-s">'list'</span><span class="pl-kos">]</span>
        <span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">reportSlowTests</span>: <span class="pl-c1">null</span><span class="pl-kos">,</span>
        <span class="pl-c1">projects</span>: <span class="pl-kos">[</span>
            <span class="pl-kos">{</span>
            <span class="pl-c1">name</span>: <span class="pl-s">'Test1'</span><span class="pl-kos">,</span>
            <span class="pl-c1">testDir</span>: <span class="pl-s">'./test'</span><span class="pl-kos">,</span>
            <span class="pl-c1">testMatch</span>: <span class="pl-s">'sequence1.spec.js'</span><span class="pl-kos">,</span>
            <span class="pl-c1">retries</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
            <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
                <span class="pl-c1">browserName</span>: <span class="pl-s">'chromium'</span><span class="pl-kos">,</span>
                <span class="pl-c1">channel</span>: <span class="pl-s">'chrome'</span><span class="pl-kos">,</span>
                <span class="pl-c1">headless</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
                <span class="pl-c1">viewport</span>: <span class="pl-kos">{</span><span class="pl-c1">width</span>: <span class="pl-c1">1600</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">825</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-c1">ignoreHTTPSErrors</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
                <span class="pl-c1">trace</span>: <span class="pl-s">"off"</span><span class="pl-kos">,</span>
                <span class="pl-c1">screenshot</span>: <span class="pl-s">"only-on-failure"</span><span class="pl-kos">,</span>
                <span class="pl-c1">acceptDownloads</span>:<span class="pl-c1">true</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-kos">]</span>

    <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">config</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">global-setup.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { chromium, Browser, BrowserContext } = require('@playwright/test');

module.exports = async () =&gt; {

        const browser = await chromium.launch({
            headless: false
        });
        const context = await browser.newContext();

        // Open new page
        const page = await context.newPage();
        await page.context().storageState({path: 'empty_storage.json'});

        // Go to https://github.com/
        await page.goto('https://github.com/');

        // Click text=Sign in
        await page.click('text=Sign in');
        // assert.equal(page.url(), 'https://github.com/login');

        // Fill input[name=&quot;login&quot;]
        await page.fill('input[name=&quot;login&quot;]', '');

        // Fill input[name=&quot;password&quot;]
        await page.fill('input[name=&quot;password&quot;]', '');

        // Click input:has-text(&quot;Sign in&quot;)
        await page.click('input:has-text(&quot;Sign in&quot;)');
        // assert.equal(page.url(), 'https://github.com/');

        await page.context().storageState({path: 'login_storage.json'});

        // ---------------------
        await context.close();
        await browser.close();

}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> chromium<span class="pl-kos">,</span> Browser<span class="pl-kos">,</span> BrowserContext <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@playwright/test'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

        <span class="pl-k">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">headless</span>: <span class="pl-c1">false</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">const</span> <span class="pl-s1">context</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newContext</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Open new page</span>
        <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">context</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">storageState</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'empty_storage.json'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Go to https://github.com/</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'https://github.com/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Click text=Sign in</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">'text=Sign in'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// assert.equal(page.url(), 'https://github.com/login');</span>

        <span class="pl-c">// Fill input[name="login"]</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s">'input[name="login"]'</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Fill input[name="password"]</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s">'input[name="password"]'</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Click input:has-text("Sign in")</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">'input:has-text("Sign in")'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// assert.equal(page.url(), 'https://github.com/');</span>

        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">context</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">storageState</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'login_storage.json'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// ---------------------</span>
        <span class="pl-k">await</span> <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span></pre></div>
<p dir="auto">sequence1.spec.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require('./pw1_test_spec.js');
require('./pw2_test_spec.js');"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./pw1_test_spec.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./pw2_test_spec.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">pw1_test_spec.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const {test,expect} = require(&quot;@playwright/test&quot;);

test.use({storageState: 'login_storage.json'});
test.describe('pw1_test', () =&gt; {

    test('test', async ({ page }) =&gt; {

        // Go to https://github.com/
        await page.goto('https://github.com/');

        // Click text=Pull requests
        await page.click('text=Pull requests');
        await expect(page).toHaveURL('https://github.com/pulls');

    });
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span>test<span class="pl-kos">,</span>expect<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@playwright/test"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">storageState</span>: <span class="pl-s">'login_storage.json'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'pw1_test'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

    <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'test'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

        <span class="pl-c">// Go to https://github.com/</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'https://github.com/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-c">// Click text=Pull requests</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">'text=Pull requests'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">await</span> <span class="pl-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toHaveURL</span><span class="pl-kos">(</span><span class="pl-s">'https://github.com/pulls'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">pw2_test_spec.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
const {test,expect} = require(&quot;@playwright/test&quot;);

test.use({storageState: 'empty_storage.json'});
test.describe('pw2_test', () =&gt; {

    test('test', async ({ page }) =&gt; {

        // Go to https://github.com/
        await page.goto('https://gmail.com/');

    });
});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span>test<span class="pl-kos">,</span>expect<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"@playwright/test"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">storageState</span>: <span class="pl-s">'empty_storage.json'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">describe</span><span class="pl-kos">(</span><span class="pl-s">'pw2_test'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

    <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">'test'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> page <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

        <span class="pl-c">// Go to https://github.com/</span>
        <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s">'https://gmail.com/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<ul dir="auto">
<li>Provide login credentials to GitHub in global-setup.js</li>
<li>global-setup will create two storageState files, one for GitHub and other for empty storageState</li>
<li>When pw1_test_spec.js is executed, it will redirect to login page instead of using the storageState</li>
<li>If i exclude pw2_test_spec.js from the sequence file, i won't be redirected to login page</li>
</ul>
<p dir="auto">Kindly let me know if you need any other information.</p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.17.1</li>
<li>Operating System: Windows</li>
<li>Node.js version: 17.0.1</li>
<li>Browser: Chromium</li>
</ul>
<p dir="auto"><strong>Describe the bug</strong><br>
A first step for migrating our Protractor tests most likely will be to migrate them 1:1.<br>
Lengthy tests depending on the previous tests, also doing UI-based login and some other setup steps in beforeAll blocks. So not nearly as isolated as we'd like.</p>
<p dir="auto">I noticed the tracing behaves a bit odd for when the <a href="https://playwright.dev/docs/test-auth#reuse-the-signed-in-page-in-multiple-tests" rel="nofollow">page was created in the beforeAll like this</a>.</p>
<p dir="auto">I've attached <a href="https://github.com/microsoft/playwright/files/7719514/playwright-beforeall-trace-strangeness.zip">playwright-beforeall-trace-strangeness.zip</a> with source code and html report with traces.</p>
<p dir="auto">When viewing the report and navigating to the traces:</p>
<ul dir="auto">
<li>The filmstrips for both test 1 and test 2 are mostly dominated by the beforeAll step.</li>
<li>The first action of the actual test (page.goto) occupies a large part of the timeline bar.<br>
But the filmstrip for the same time period shows only screenshots of the beforeAll step.</li>
<li>Further to the right, the timeline bars are also out of sync with the film strip.</li>
<li>The actions pane is showing only the actual test actions (nothing from the beforeAll).</li>
</ul>
<p dir="auto">(Hard to describe, but hope it's clear like this)</p>
<p dir="auto">My preferred fix would be one of:</p>
<ul dir="auto">
<li>beforeAll and first test combined in one trace, but with also the beforeAll actions shown, and timeline bars and filmstrip properly aligned/in sync.</li>
<li>a separate trace for beforeAll (ideally also with a separate beforeAll item in the report).</li>
</ul>