<p dir="auto">Hi, back again after resolving the issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1303669204" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/15619" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/15619/hovercard" href="https://github.com/microsoft/playwright/issues/15619">#15619</a>.<br>
Here is another automation use case for the application we are evaluating with Playwright.</p>
<p dir="auto">I tried to find out the solution on internet, but many of them are either duplicate of issue as mentioned below or are just incomplete. I saw the solution provided here but could not figure out how to provide the complete selector string to the dispatchEvent function.</p>
<p dir="auto"><code class="notranslate">await page.dispatchEvent('YOUR_TARGET_SELECTOR', 'drop', { dataTransfer });</code></p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1069164941" data-permission-text="Title is private" data-url="https://github.com/microsoft/playwright/issues/10667" data-hovercard-type="issue" data-hovercard-url="/microsoft/playwright/issues/10667/hovercard" href="https://github.com/microsoft/playwright/issues/10667">#10667</a></p>
<p dir="auto">I tried with my below code snippet but it did not work. It does not give me any error but nothing happened on the page.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/32839577/179572163-7db8f895-752d-4339-b4cf-8cf2d628c3dd.PNG"><img src="https://user-images.githubusercontent.com/32839577/179572163-7db8f895-752d-4339-b4cf-8cf2d628c3dd.PNG" alt="DragandDrop" style="max-width: 100%;"></a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;iframe id=&quot;legacy-app&quot; src=&quot;//admin.xyz.asdf.com/xyz/zxy/12341a8ab651df98b842df40?vp=bulkproduct&quot; data-test=&quot;legacy-app&quot;&gt;
	&lt;div class=&quot;dropzone single dropBox&quot; __playwright_target__=&quot;after@call@28&quot;&gt;&lt;/div&gt;
&lt;/iframe&gt;"><pre class="notranslate"><code class="notranslate">&lt;iframe id="legacy-app" src="//admin.xyz.asdf.com/xyz/zxy/12341a8ab651df98b842df40?vp=bulkproduct" data-test="legacy-app"&gt;
	&lt;div class="dropzone single dropBox" __playwright_target__="after@call@28"&gt;&lt;/div&gt;
&lt;/iframe&gt;
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    const dropBox = await page.frameLocator('[data-test=&quot;legacy-app&quot;]').locator('[class=&quot;dropzone single dropBox&quot;]');
    await expect(dropBox).toBeVisible();
    
    // Read your file into a buffer.
    const filePath ='./test-data/sheets/UU-24074-C202362.xlsx';
    const buffer = fs.readFileSync(filePath);

    // Create the DataTransfer and File
    const dataTransfer = await dropBox.evaluateHandle((data) =&gt; {
        const dt = new DataTransfer();
        // Convert the buffer to a hex array
        const file = new File([data.toString('hex')], 'UU-24074-C202362.xlsx', { type: 'application/xlsx' });
        dt.items.add(file);
        return dt;
    }, buffer);

    await dropBox.dispatchEvent('drop', { dataTransfer });
"><pre class="notranslate"><code class="notranslate">    const dropBox = await page.frameLocator('[data-test="legacy-app"]').locator('[class="dropzone single dropBox"]');
    await expect(dropBox).toBeVisible();
    
    // Read your file into a buffer.
    const filePath ='./test-data/sheets/UU-24074-C202362.xlsx';
    const buffer = fs.readFileSync(filePath);

    // Create the DataTransfer and File
    const dataTransfer = await dropBox.evaluateHandle((data) =&gt; {
        const dt = new DataTransfer();
        // Convert the buffer to a hex array
        const file = new File([data.toString('hex')], 'UU-24074-C202362.xlsx', { type: 'application/xlsx' });
        dt.items.add(file);
        return dt;
    }, buffer);

    await dropBox.dispatchEvent('drop', { dataTransfer });

</code></pre></div>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.32.0</li>
<li>Operating System: [All, Windows 11, Ubuntu 20, macOS 13.2, etc.]</li>
<li>Browser: Chromium</li>
<li>Other info:</li>
</ul>
<h3 dir="auto">Test code</h3>
<ol dir="auto">
<li>Can be reproduced in the <code class="notranslate">har.spec.ts</code> file. Copied from there for reference</li>
</ol>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="it('should not hang on slow chunked response', async ({ browserName, browser, contextFactory, server }, testInfo) =&gt; {
  it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/21182' });
  server.setRoute('/empty.html', (req, res) =&gt; {
    res.writeHead(200, {
      'Content-Type': 'text/html',
    });
    res.end(`&lt;script&gt;
    let receivedFirstData = new Promise(f =&gt; {
      setTimeout(() =&gt;  {
        var x = new XMLHttpRequest();
        x.open(&quot;GET&quot;, &quot;slow.txt&quot;);
        x.onprogress = () =&gt; f();
        x.send();
      }, 0);
    });
    &lt;/script&gt;`);
  });
  server.setRoute('/slow.txt', async (req, res) =&gt; {
    res.writeHead(200, {
      'Content-Type': 'text/plain',
      'Transfer-Encoding': 'chunked',
      'Content-length': '2023'
    });
    res.write('begin');
  });
  const { page, getLog, context } = await pageWithHar(contextFactory, testInfo);
 // will not be fired for slow.txt file
  context.on('response', resp =&gt; console.log('received response', resp.url()));
  await page.goto(server.EMPTY_PAGE);
  await page.evaluate(() =&gt; (window as any).receivedFirstData);
  const log = await getLog();
  expect(log.browser.name.toLowerCase()).toBe(browserName);
  expect(log.browser.version).toBe(browser.version());
});
"><pre class="notranslate"><span class="pl-en">it</span><span class="pl-kos">(</span><span class="pl-s">'should not hang on slow chunked response'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> browserName<span class="pl-kos">,</span> browser<span class="pl-kos">,</span> contextFactory<span class="pl-kos">,</span> server <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">testInfo</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-s1">it</span><span class="pl-kos">.</span><span class="pl-en">info</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">annotations</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-s">'issue'</span><span class="pl-kos">,</span> <span class="pl-c1">description</span>: <span class="pl-s">'https://github.com/microsoft/playwright/issues/21182'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">setRoute</span><span class="pl-kos">(</span><span class="pl-s">'/empty.html'</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">writeHead</span><span class="pl-kos">(</span><span class="pl-c1">200</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-s">'Content-Type'</span>: <span class="pl-s">'text/html'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">end</span><span class="pl-kos">(</span><span class="pl-s">`&lt;script&gt;</span>
<span class="pl-s">    let receivedFirstData = new Promise(f =&gt; {</span>
<span class="pl-s">      setTimeout(() =&gt;  {</span>
<span class="pl-s">        var x = new XMLHttpRequest();</span>
<span class="pl-s">        x.open("GET", "slow.txt");</span>
<span class="pl-s">        x.onprogress = () =&gt; f();</span>
<span class="pl-s">        x.send();</span>
<span class="pl-s">      }, 0);</span>
<span class="pl-s">    });</span>
<span class="pl-s">    &lt;/script&gt;`</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-s1">server</span><span class="pl-kos">.</span><span class="pl-en">setRoute</span><span class="pl-kos">(</span><span class="pl-s">'/slow.txt'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">writeHead</span><span class="pl-kos">(</span><span class="pl-c1">200</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-s">'Content-Type'</span>: <span class="pl-s">'text/plain'</span><span class="pl-kos">,</span>
      <span class="pl-s">'Transfer-Encoding'</span>: <span class="pl-s">'chunked'</span><span class="pl-kos">,</span>
      <span class="pl-s">'Content-length'</span>: <span class="pl-s">'2023'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s">'begin'</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">const</span> <span class="pl-kos">{</span> page<span class="pl-kos">,</span> getLog<span class="pl-kos">,</span> context <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">pageWithHar</span><span class="pl-kos">(</span><span class="pl-s1">contextFactory</span><span class="pl-kos">,</span> <span class="pl-s1">testInfo</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
 <span class="pl-c">// will not be fired for slow.txt file</span>
  <span class="pl-s1">context</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'response'</span><span class="pl-kos">,</span> <span class="pl-s1">resp</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'received response'</span><span class="pl-kos">,</span> <span class="pl-s1">resp</span><span class="pl-kos">.</span><span class="pl-en">url</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">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-c1">EMPTY_PAGE</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">evaluate</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-smi">window</span> <span class="pl-k">as</span> <span class="pl-smi">any</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">receivedFirstData</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">log</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">getLog</span><span class="pl-kos">(</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">log</span><span class="pl-kos">.</span><span class="pl-c1">browser</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-s1">browserName</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">log</span><span class="pl-kos">.</span><span class="pl-c1">browser</span><span class="pl-kos">.</span><span class="pl-c1">version</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toBe</span><span class="pl-kos">(</span><span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">version</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>Run the above test in the PW repo</li>
<li><code class="notranslate">npm run ctest -- -g 'should not hang on slow chunked response'</code></li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<ul dir="auto">
<li><code class="notranslate">context.on("response")</code> is fired correctly for Firefox and Webkit browsers.</li>
</ul>
<p dir="auto"><strong>Actual</strong></p>
<ul dir="auto">
<li><code class="notranslate">context.on("response")</code> event will not be fired for the chunked response.</li>
</ul>