<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32.3</li>
<li>Operating System: macOS 12.6.2</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Error:</h3>
<p dir="auto">Test timeout of 50000ms exceeded.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: locator.scrollIntoViewIfNeeded: Target closed
=========================== logs ===========================
waiting for locator('xpath=//div[@type=\'objective\']//span[text()=\'l02Eo5\']/../..')
============================================================

   at ../pages/okr/homePage.js:45

  43 | export async function verifyObjPresentOnHomePage(testAttributes, objName) {
  44 |     console.log(&quot;###########&quot;, objName)
&gt; 45 |     await testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']/../..`).scrollIntoViewIfNeeded();
     |                                                                                                    ^
  46 |     // const elem = await testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']/../..`);
  47 |     // await elem.evaluate(&quot;arguments[0].scrollIntoView(true);&quot;);
  48 |     await expect.soft(testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']`),"><pre class="notranslate"><code class="notranslate">Error: locator.scrollIntoViewIfNeeded: Target closed
=========================== logs ===========================
waiting for locator('xpath=//div[@type=\'objective\']//span[text()=\'l02Eo5\']/../..')
============================================================

   at ../pages/okr/homePage.js:45

  43 | export async function verifyObjPresentOnHomePage(testAttributes, objName) {
  44 |     console.log("###########", objName)
&gt; 45 |     await testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']/../..`).scrollIntoViewIfNeeded();
     |                                                                                                    ^
  46 |     // const elem = await testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']/../..`);
  47 |     // await elem.evaluate("arguments[0].scrollIntoView(true);");
  48 |     await expect.soft(testAttributes.page.locator(`//div[@type='objective']//span[text()='${objName}']`),
</code></pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: v1.31.2</li>
<li>Operating System: Windows 11</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Source code</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I provided exact source code that allows reproducing the issue locally.</li>
</ul>




<p dir="auto"><strong>Link to the GitHub repository with the repro</strong></p>
<p dir="auto"><a href="https://github.com/Marcin3/challenge">https://github.com/Marcin3/challenge</a></p>
<p dir="auto">or</p>
<p dir="auto"><strong>Config file</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// playwright.config.ts
import type { PlaywrightTestConfig } from &quot;@playwright/test&quot;;
import { devices } from &quot;@playwright/test&quot;;
import dotenv from &quot;dotenv&quot;;

dotenv.config();

const config: PlaywrightTestConfig = {
  testDir: &quot;./tests&quot;,
  /* Maximum time one test can run for. */
  timeout: 30 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 10000,
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: 2,
  reporter: &quot;html&quot;,

  use: {
    actionTimeout: 0,
    baseURL: process.env.BASE_URL,

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: &quot;on&quot;,
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: &quot;chromium&quot;,
      use: {
        ...devices[&quot;Desktop Chrome&quot;],
      },
    },
  ],
};

export default config;
"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-s1">type</span> <span class="pl-kos">{</span> <span class="pl-v">PlaywrightTestConfig</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@playwright/test"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">devices</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"@playwright/test"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">dotenv</span> <span class="pl-k">from</span> <span class="pl-s">"dotenv"</span><span class="pl-kos">;</span>

<span class="pl-s1">dotenv</span><span class="pl-kos">.</span><span class="pl-en">config</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">config</span>: <span class="pl-v">PlaywrightTestConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">testDir</span>: <span class="pl-s">"./tests"</span><span class="pl-kos">,</span>
  <span class="pl-c">/* Maximum time one test can run for. */</span>
  <span class="pl-c1">timeout</span>: <span class="pl-c1">30</span> <span class="pl-c1">*</span> <span class="pl-c1">1000</span><span class="pl-kos">,</span>
  <span class="pl-c1">expect</span>: <span class="pl-kos">{</span>
    <span class="pl-c">/**</span>
<span class="pl-c">     * Maximum time expect() should wait for the condition to be met.</span>
<span class="pl-c">     * For example in `await expect(locator).toHaveText();`</span>
<span class="pl-c">     */</span>
    <span class="pl-c1">timeout</span>: <span class="pl-c1">10000</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">fullyParallel</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">forbidOnly</span>: <span class="pl-c1">!</span><span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span><span class="pl-kos">,</span>
  <span class="pl-c1">retries</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">CI</span> ? <span class="pl-c1">2</span> : <span class="pl-c1">0</span><span class="pl-kos">,</span>
  <span class="pl-c1">workers</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
  <span class="pl-c1">reporter</span>: <span class="pl-s">"html"</span><span class="pl-kos">,</span>

  <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">actionTimeout</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">baseURL</span>: <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">BASE_URL</span><span class="pl-kos">,</span>

    <span class="pl-c">/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */</span>
    <span class="pl-c1">trace</span>: <span class="pl-s">"on"</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c">/* Configure projects for major browsers */</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">"chromium"</span><span class="pl-kos">,</span>
      <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
        ...<span class="pl-s1">devices</span><span class="pl-kos">[</span><span class="pl-s">"Desktop Chrome"</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-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">config</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="test(&quot;Search wrong word&quot;, async ({ page }) =&gt; {
  const wrongWord = &quot;sythetic&quot;;
  const mainMenuPage = new MainMenuPage(page);

  await test.step(`Given User is on page https://mostly.ai/`, async () =&gt; {
    await page.goto(&quot;&quot;);
    expect(page).toHaveURL(&quot;&quot;);
  });

  await test.step(`When User click the “Search” button`, async () =&gt; {
    await mainMenuPage.clickOnSearchButton();
  });

  await test.step(`And type “sythetic” (wrong spelling of synthetic) in search field`, async () =&gt; {
    await mainMenuPage.fillSearchFiled(wrongWord);
  });

  await test.step(`And press Enter`, async () =&gt; {
    await mainMenuPage.pressEnterButtonOnSearchFiled();
  });

  await test.step(`Then User can see following information: “Sorry, no results for: sythetic”`, async () =&gt; {
    const firstPart = `Sorry, no results for:`;
    await mainMenuPage.checkSearchResult(firstPart, wrongWord);
  });
});"><pre class="notranslate"><span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s">"Search wrong word"</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-k">const</span> <span class="pl-s1">wrongWord</span> <span class="pl-c1">=</span> <span class="pl-s">"sythetic"</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">mainMenuPage</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-smi">MainMenuPage</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-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">`Given User is on page https://mostly.ai/`</span><span class="pl-kos">,</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">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">""</span><span class="pl-kos">)</span><span class="pl-kos">;</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">""</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-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">`When User click the “Search” button`</span><span class="pl-kos">,</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">await</span> <span class="pl-s1">mainMenuPage</span><span class="pl-kos">.</span><span class="pl-en">clickOnSearchButton</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-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">`And type “sythetic” (wrong spelling of synthetic) in search field`</span><span class="pl-kos">,</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">await</span> <span class="pl-s1">mainMenuPage</span><span class="pl-kos">.</span><span class="pl-en">fillSearchFiled</span><span class="pl-kos">(</span><span class="pl-s1">wrongWord</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-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">`And press Enter`</span><span class="pl-kos">,</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">await</span> <span class="pl-s1">mainMenuPage</span><span class="pl-kos">.</span><span class="pl-en">pressEnterButtonOnSearchFiled</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-k">await</span> <span class="pl-s1">test</span><span class="pl-kos">.</span><span class="pl-en">step</span><span class="pl-kos">(</span><span class="pl-s">`Then User can see following information: “Sorry, no results for: sythetic”`</span><span class="pl-kos">,</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">firstPart</span> <span class="pl-c1">=</span> <span class="pl-s">`Sorry, no results for:`</span><span class="pl-kos">;</span>
    <span class="pl-k">await</span> <span class="pl-s1">mainMenuPage</span><span class="pl-kos">.</span><span class="pl-en">checkSearchResult</span><span class="pl-kos">(</span><span class="pl-s1">firstPart</span><span class="pl-kos">,</span> <span class="pl-s1">wrongWord</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>Steps</strong></p>
<ul dir="auto">
<li>Clone the repo</li>
<li>First install project using command <code class="notranslate"> npm install</code></li>
<li>To run tests please run from root using command <code class="notranslate">npx playwright test</code></li>
<li>Open report  npx playwright show-report</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">For test Search wrong word you should see step When User click the “Search” button</p>
<p dir="auto"><strong>Actual</strong><br>
Now this step is missing<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/10815386/223079904-9edf7ce4-5774-4a5c-96dd-ddfcf59f55d9.png"><img src="https://user-images.githubusercontent.com/10815386/223079904-9edf7ce4-5774-4a5c-96dd-ddfcf59f55d9.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Here is also link to playwright report <a href="https://github.com/Marcin3/challenge/tree/main/playwright-report">https://github.com/Marcin3/challenge/tree/main/playwright-report</a></p>