[REGRESSION]: Selection.addRange doesn't work on WebKit browser

[haven2world]

Context:

• GOOD Playwright Version: 1.19.2
• BAD Playwright Version: 1.33.0 (Didn't test the versions between 1.19.2-1.33.0)
• Operating System: Mac

Code Snippet

Repro the issue in the playground https://try.playwright.tech/?l=javascript&s=oqzkh91 with code below:

// @ts-check
const playwright = require('playwright');

(async () => {
  // Try to add 'playwright.firefox' to the list ↓
  for (const browserType of [playwright.chromium, playwright.webkit]) {
    const browser = await browserType.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.evaluate(() => {
      document.body.innerHTML = `
      <div id="test">test</div>
      `
    })
    await page.evaluate(() => {
      const div = document.querySelector('#test')
      const range = document.createRange();
      range.selectNodeContents(div);
      getSelection().removeAllRanges()
      getSelection().addRange(range)
    })
    await page.screenshot({ path: `example-${browserType.name()}.png` });

    await browser.close();
  }
})();

Describe the bug

As you can see, the text is not selected on webkit

[dgozman]

@haven2world I can reproduce the issue. However, if I add await page.waitForTimeout(1000) before taking a screenshot, webkit has the text selected. I guess selection API in WebKit does not synchronously update rendering.

When I use await expect(page).toHaveScreenshot(), everything works as expected, so I'd recommend to switch to it. Let me know if that helps.

[haven2world]

I tried waitForTimeout in the playground, it works, but on my local device, it didn't. I guess it could be related to the version difference. In the playground it's 1.31.2. And locally it's 1.33.0 for me.

[haven2world]

I tried to downgrade to 1.31.2 locally, and it worked again. I believe there are some regressions between 1.31.2 - 1.33.0.

[dgozman]

I tried to downgrade to 1.31.2 locally, and it worked again. I believe there are some regressions between 1.31.2 - 1.33.0.

Please share a repro that we can run locally, and we'll happily take a look! The original snippet works for me with 1.33.

[haven2world]

Sorry, I cannot reproduce it in a simple demo. But I recorded a video to demo how it works in our project environment. I only run command from the console and I believe it's not something affected by our project. Because as you can see, after the firs time I added the range to the selection, the selection object had changed correctly but the result on screen didn't update no matter how long I waited. But if I ran the same command again, it worked.

https://github.com/microsoft/playwright/assets/17299418/9226ea6a-d949-4fbc-8dd1-e5064d54b26b

[haven2world]

BTW here is our playwright config

import { devices, PlaywrightTestConfig, defineConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  testMatch: path.resolve(__dirname, 'test/**/*.test.ts'),
  snapshotPathTemplate: '{testFileDir}/results/{testFileName}/{platform}-{testName}-{arg}{ext}',
  projects: [
    {
      name: 'webkit-iPhone',
      use: { ...devices['iPhone 13'] },
    },
  ]
};

[dgozman]

@haven2world I am still not able to reproduce, with v1.33 and 'iPhone 13' device. I also tried with and without a <meta name=viewport>. There must be something specific to your setup that we have to replicate in order to see and fix the issue. I'd recommend creating an example repository with as much as you can share. Unfortunately, without a repro I'll have to close this issue as non-actionable.

[dgozman]

Closing because we lack the information to act on this issue. If you can provide a full repro, please file a new issue by filling the "Bug Report" template, and link to this one.