<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version :Version 1.32.3</li>
<li>Operating System: Windows 11</li>
<li>Browser: Firefox only</li>
<li>Other info:<br>
Also seen in our CICD, which is an ubuntu system.</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"> 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">[https://github.com/your_profile/playwright_issue_title]</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="import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
	// Look for test files in the &quot;e2e&quot; directory, relative to this configuration file
	testDir: 'E2E',
	// Report(s) and reporter options
	reporter: [['list'], ['json', { outputFile: 'results.json' }], ['./E2E/utils/logger.ts']], // , ['html', { open: 'never' }]],
	// reporter: './E2E/utils/logger.ts',
	// output directory for results
	outputDir: './../bastionfrontend/test-results',
	// Each test is given 4 minutes default timeout
	timeout: 240000,
	// Number of retries for a failed test
	retries: 0,
	// Concurrency
	workers: 1,
	projects: [
		{
			name: 'chromium',
			use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 920 } }
		},
		{
			name: 'firefox',
			use: { ...devices['Desktop Firefox'], viewport: { width: 1920, height: 920 } }
		},
		{
			name: 'webkit',
			use: { ...devices['Desktop Safari'], viewport: { width: 1920, height: 920 } }
		}
	],
	// large number of max failures to signify a QA needs to look at the test book
	// maxFailures: 30,
	// Run whole test suite in parallel
	// fullyParallel: true,
	// Addition fixtures options
	use: {
		// Browser launch options
		launchOptions: {
			slowMo: 0
		},
		actionTimeout: 30000,
		navigationTimeout: 60000,
		headless: true,
		// Context options
		viewport: { width: 1920, height: 920 },
		ignoreHTTPSErrors: true,
		// Artifact options for screenshot/video
		screenshot: 'on',
		// video: {
		// 	mode: 'on',
		// 	size: { width: 1280, height: 720 }
		// },
		trace: 'off',
		baseURL: process.env.baseURL || process.env.TEST_URL
	}
};
export default config;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">PlaywrightTestConfig</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">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-c">// Look for test files in the "e2e" directory, relative to this configuration file</span>
	<span class="pl-c1">testDir</span>: <span class="pl-s">'E2E'</span><span class="pl-kos">,</span>
	<span class="pl-c">// Report(s) and reporter options</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-s">'json'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">outputFile</span>: <span class="pl-s">'results.json'</span> <span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'./E2E/utils/logger.ts'</span><span class="pl-kos">]</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c">// , ['html', { open: 'never' }]],</span>
	<span class="pl-c">// reporter: './E2E/utils/logger.ts',</span>
	<span class="pl-c">// output directory for results</span>
	<span class="pl-c1">outputDir</span>: <span class="pl-s">'./../bastionfrontend/test-results'</span><span class="pl-kos">,</span>
	<span class="pl-c">// Each test is given 4 minutes default timeout</span>
	<span class="pl-c1">timeout</span>: <span class="pl-c1">240000</span><span class="pl-kos">,</span>
	<span class="pl-c">// Number of retries for a failed test</span>
	<span class="pl-c1">retries</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
	<span class="pl-c">// Concurrency</span>
	<span class="pl-c1">workers</span>: <span class="pl-c1">1</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">'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-c1">viewport</span>: <span class="pl-kos">{</span> <span class="pl-c1">width</span>: <span class="pl-c1">1920</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">920</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-c1">name</span>: <span class="pl-s">'firefox'</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 Firefox'</span><span class="pl-kos">]</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">1920</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">920</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-c1">name</span>: <span class="pl-s">'webkit'</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 Safari'</span><span class="pl-kos">]</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">1920</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">920</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-c">// large number of max failures to signify a QA needs to look at the test book</span>
	<span class="pl-c">// maxFailures: 30,</span>
	<span class="pl-c">// Run whole test suite in parallel</span>
	<span class="pl-c">// fullyParallel: true,</span>
	<span class="pl-c">// Addition fixtures options</span>
	<span class="pl-c1">use</span>: <span class="pl-kos">{</span>
		<span class="pl-c">// Browser launch options</span>
		<span class="pl-c1">launchOptions</span>: <span class="pl-kos">{</span>
			<span class="pl-c1">slowMo</span>: <span class="pl-c1">0</span>
		<span class="pl-kos">}</span><span class="pl-kos">,</span>
		<span class="pl-c1">actionTimeout</span>: <span class="pl-c1">30000</span><span class="pl-kos">,</span>
		<span class="pl-c1">navigationTimeout</span>: <span class="pl-c1">60000</span><span class="pl-kos">,</span>
		<span class="pl-c1">headless</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
		<span class="pl-c">// Context options</span>
		<span class="pl-c1">viewport</span>: <span class="pl-kos">{</span> <span class="pl-c1">width</span>: <span class="pl-c1">1920</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">920</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-c">// Artifact options for screenshot/video</span>
		<span class="pl-c1">screenshot</span>: <span class="pl-s">'on'</span><span class="pl-kos">,</span>
		<span class="pl-c">// video: {</span>
		<span class="pl-c">// 	mode: 'on',</span>
		<span class="pl-c">// 	size: { width: 1280, height: 720 }</span>
		<span class="pl-c">// },</span>
		<span class="pl-c1">trace</span>: <span class="pl-s">'off'</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">baseURL</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">TEST_URL</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-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="	async selectInputOption(inputLocator: Locator, selectValue: string | number, autoCloses: boolean = true, clearSelections: boolean = false, allowDNE?: boolean): Promise&lt;void&gt; {
		await inputLocator.waitFor();
		await inputLocator.isEnabled();
		await inputLocator.click();
		const popupContent = this.page.locator('.dx-selectbox-popup-wrapper,.dx-header-filter-menu:visible .dx-popup-content');
		await popupContent.waitFor();
		await this.waitForAnimationEnd(popupContent);
		// await popupContent.waitFor();
		let theOption: Locator;
		if (clearSelections) {
			theOption = popupContent.locator('.dx-list-select-all:visible .dx-checkbox');
			await theOption.waitFor();
			const theClasses = await theOption.getAttribute('class');
			if (theClasses?.includes('dx-checkbox-checked')) {
				await theOption.click();
			} else if (theClasses?.includes('dx-checkbox-indeterminate')) {
				await theOption.click();
				// await this.page.waitForTimeout(250);
				await this.waitForAnimationEnd(popupContent);
				await theOption.click();
			}
			await this.waitForAnimationEnd(popupContent);
			// await this.page.waitForTimeout(250);
		}
		if ([0, 'Select All'].includes(selectValue)) {
			theOption = popupContent.locator('.dx-list-select-all:visible');
		} else {
			if (typeof selectValue === 'number') {
				theOption = popupContent.locator('.dx-list-item:visible').nth(selectValue - 1);
			} else {
				const searchbox = popupContent.locator('input[aria-label=&quot;Search&quot;]:visible');
				if (await searchbox.count() === 1) {
					await searchbox.fill(selectValue);
				}
				theOption = popupContent.locator('.dx-list-item:visible').getByText(selectValue, { exact: true });
			}
		}
		if (await theOption.count() &gt;= 1 || allowDNE !== true) {
			await theOption.waitFor();
			await theOption.click();
		}
		if (autoCloses === false) {
			const okayButton = this.page.locator('.dx-toolbar.dx-popup-bottom [aria-label=&quot;OK&quot;]');
			if (await okayButton.count() === 1) {
				await okayButton.click();
			} else {
				await inputLocator.press('Escape');
			}
		}
		await popupContent.waitFor({ state: 'detached' });
	}"><pre class="notranslate">	async <span class="pl-s1">selectInputOption</span><span class="pl-kos">(</span><span class="pl-s1">inputLocator</span>: <span class="pl-v">Locator</span><span class="pl-kos">,</span> <span class="pl-s1">selectValue</span>: <span class="pl-s1">string</span> <span class="pl-c1">|</span> <span class="pl-s1">number</span><span class="pl-kos">,</span> <span class="pl-s1">autoCloses</span>: <span class="pl-s1">boolean</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-s1">clearSelections</span>: <span class="pl-s1">boolean</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-s1">allowDNE</span>?: <span class="pl-s1">boolean</span><span class="pl-kos">)</span>: <span class="pl-v">Promise</span><span class="pl-c1">&lt;</span><span class="pl-k">void</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
		<span class="pl-s1">await</span> <span class="pl-s1">inputLocator</span><span class="pl-kos">.</span><span class="pl-c1">waitFor</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">inputLocator</span><span class="pl-kos">.</span><span class="pl-en">isEnabled</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">inputLocator</span><span class="pl-kos">.</span><span class="pl-en">click</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">popupContent</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-selectbox-popup-wrapper,.dx-header-filter-menu:visible .dx-popup-content'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-k">await</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">waitFor</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-smi">this</span><span class="pl-kos">.</span><span class="pl-en">waitForAnimationEnd</span><span class="pl-kos">(</span><span class="pl-s1">popupContent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-c">// await popupContent.waitFor();</span>
		<span class="pl-k">let</span> <span class="pl-s1">theOption</span>: <span class="pl-v">Locator</span><span class="pl-kos">;</span>
		<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">clearSelections</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
			<span class="pl-s1">theOption</span> <span class="pl-c1">=</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-list-select-all:visible .dx-checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-k">await</span> <span class="pl-s1">theOption</span><span class="pl-kos">.</span><span class="pl-en">waitFor</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">theClasses</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">theOption</span><span class="pl-kos">.</span><span class="pl-en">getAttribute</span><span class="pl-kos">(</span><span class="pl-s">'class'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">theClasses</span><span class="pl-kos">?.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">'dx-checkbox-checked'</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">theOption</span><span class="pl-kos">.</span><span class="pl-en">click</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">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">theClasses</span><span class="pl-kos">?.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s">'dx-checkbox-indeterminate'</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">theOption</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
				<span class="pl-c">// await this.page.waitForTimeout(250);</span>
				<span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">waitForAnimationEnd</span><span class="pl-kos">(</span><span class="pl-s1">popupContent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
				<span class="pl-k">await</span> <span class="pl-s1">theOption</span><span class="pl-kos">.</span><span class="pl-en">click</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-smi">this</span><span class="pl-kos">.</span><span class="pl-en">waitForAnimationEnd</span><span class="pl-kos">(</span><span class="pl-s1">popupContent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-c">// await this.page.waitForTimeout(250);</span>
		<span class="pl-kos">}</span>
		<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-s">'Select All'</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">includes</span><span class="pl-kos">(</span><span class="pl-s1">selectValue</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
			<span class="pl-s1">theOption</span> <span class="pl-c1">=</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-list-select-all:visible'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
		<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
			<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">selectValue</span> <span class="pl-c1">===</span> <span class="pl-s">'number'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
				<span class="pl-s1">theOption</span> <span class="pl-c1">=</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-list-item:visible'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">nth</span><span class="pl-kos">(</span><span class="pl-s1">selectValue</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
				<span class="pl-k">const</span> <span class="pl-s1">searchbox</span> <span class="pl-c1">=</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'input[aria-label="Search"]:visible'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
				<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-s1">searchbox</span><span class="pl-kos">.</span><span class="pl-en">count</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
					<span class="pl-k">await</span> <span class="pl-s1">searchbox</span><span class="pl-kos">.</span><span class="pl-en">fill</span><span class="pl-kos">(</span><span class="pl-s1">selectValue</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
				<span class="pl-kos">}</span>
				<span class="pl-s1">theOption</span> <span class="pl-c1">=</span> <span class="pl-s1">popupContent</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-list-item:visible'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">getByText</span><span class="pl-kos">(</span><span class="pl-s1">selectValue</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">exact</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-k">if</span> <span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-s1">theOption</span><span class="pl-kos">.</span><span class="pl-en">count</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">&gt;=</span> <span class="pl-c1">1</span> <span class="pl-c1">||</span> <span class="pl-s1">allowDNE</span> <span class="pl-c1">!==</span> <span class="pl-c1">true</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
			<span class="pl-k">await</span> <span class="pl-s1">theOption</span><span class="pl-kos">.</span><span class="pl-en">waitFor</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">theOption</span><span class="pl-kos">.</span><span class="pl-en">click</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">if</span> <span class="pl-kos">(</span><span class="pl-s1">autoCloses</span> <span class="pl-c1">===</span> <span class="pl-c1">false</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
			<span class="pl-k">const</span> <span class="pl-s1">okayButton</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">page</span><span class="pl-kos">.</span><span class="pl-en">locator</span><span class="pl-kos">(</span><span class="pl-s">'.dx-toolbar.dx-popup-bottom [aria-label="OK"]'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
			<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">await</span> <span class="pl-s1">okayButton</span><span class="pl-kos">.</span><span class="pl-en">count</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
				<span class="pl-k">await</span> <span class="pl-s1">okayButton</span><span class="pl-kos">.</span><span class="pl-en">click</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">else</span> <span class="pl-kos">{</span>
				<span class="pl-k">await</span> <span class="pl-s1">inputLocator</span><span class="pl-kos">.</span><span class="pl-en">press</span><span class="pl-kos">(</span><span class="pl-s">'Escape'</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">popupContent</span><span class="pl-kos">.</span><span class="pl-en">waitFor</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">state</span>: <span class="pl-s">'detached'</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>[Run the test]</li>
<li>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">Clicking on an element off of a selector list should not cause the page to do a scroll and throw off the click. This runs fine in Chromium and Firefox.</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">When trying to click on a selector element that is the 4th or further along, causes the main page to do a little scroll and loose the open selector. Here is the log output when it tries to click on the element.<br>
<code class="notranslate">=========================== logs =========================== waiting for locator('.dx-selectbox-popup-wrapper,.dx-header-filter-menu:visible .dx-popup-content').locator('.dx-list-item:visible').getByText('High', { exact: true }) locator resolved to &lt;div class="dx-item-content dx-list-item-content"&gt;High&lt;/div&gt; attempting click action waiting for element to be visible, enabled and stable element is visible, enabled and stable scrolling into view if needed done scrolling performing click action &lt;td role="gridcell" aria-colindex="3" aria-selected=…&gt;417 Wolf Union&lt;/td&gt; from &lt;div data-bind="dxControlsDescendantBindings: true" c…&gt;…&lt;/div&gt; subtree intercepts pointer events retrying click action, attempt #1 waiting for element to be visible, enabled and stable element is visible, enabled and stable scrolling into view if needed done scrolling &lt;td role="gridcell" aria-colindex="3" aria-selected=…&gt;417 Wolf Union&lt;/td&gt; from &lt;div data-bind="dxControlsDescendantBindings: true" c…&gt;…&lt;/div&gt; subtree intercepts pointer events retrying click action, attempt #2 waiting 20ms waiting for element to be visible, enabled and stable element is not stable - waiting... element is visible, enabled and stable scrolling into view if needed done scrolling &lt;td role="gridcell" aria-colindex="3" aria-selected=…&gt;417 Wolf Union&lt;/td&gt; from &lt;div data-bind="dxControlsDescendantBindings: true" c…&gt;…&lt;/div&gt; subtree intercepts pointer events retrying click action, attempt #3 waiting 100ms waiting for element to be visible, enabled and stable element is not visible - waiting... ============================================================</code></p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: [v1.30.0]</li>
<li>Operating System: [macOS 13.2, focal-1.31.0]</li>
<li>Browser: [All, Chromium, Firefox, WebKit]</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"> 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">[https://github.com/your_profile/playwright_issue_title]</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 { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], },
    },
});"><pre class="notranslate"><span class="pl-c">// playwright.config.ts</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">defineConfig</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">export</span> <span class="pl-k">default</span> <span class="pl-en">defineConfig</span><span class="pl-kos">(</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">'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></pre></div>
<p dir="auto"><strong>Test file (self-contained)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="it('should check the box using setChecked', async ({ page }) =&gt; {
  await page.setContent(`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`);
  await page.getByRole('checkbox').check();
  await expect(page.getByRole('checkbox')).toBeChecked();
});"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should check the box using setChecked'</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">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">setContent</span><span class="pl-kos">(</span><span class="pl-s">`&lt;input id='checkbox' type='checkbox'&gt;&lt;/input&gt;`</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">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">check</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-en">expect</span><span class="pl-kos">(</span><span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">getByRole</span><span class="pl-kos">(</span><span class="pl-s">'checkbox'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBeChecked</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>[Run the test]</li>
<li>[...]</li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">[Describe expected behavior]<br>
Its happening quite recently, I am getting this very cryptic error<br>
TypeError: Cannot read properties of undefined (reading 'fullName')</p>
<p dir="auto">It works well on my machine but does not run when in the docker container as outlined by the documentation for visual regression</p>
<p dir="auto">I have exhaustively searched my codebase and cant identify where <code class="notranslate">fullName</code> is being used</p>
<p dir="auto"><strong>Actual</strong></p>
<p dir="auto">[Describe actual behavior]</p>