[BUG] Control+Shift+ArrowLeft fails on contenteditables with FF + Linux #5929
Comments
|
Added a test that passes for me on firefox/linux. Maybe there is something mores specific happening with your contenteditable div? |
|
@JoelEinbinder Interesting. I'll dig more into it today. I suspect it's a foreground problem maybe on the CI machine. |
|
I'm fairly certain something is going wrong here. I've stripped back the test case so we aren't running any JS and the page is just an empty document with a contenteditable div. I also noticed that this works locally for me using Ubuntu and FF, it just doesn't seem to work when run in a virtualized environment, like Github Actions. This is the HTML: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="contenteditable" contenteditable="true"></div>
</body>
</html>This is the test case: it(`Can select and delete a word`, async () => {
const {page} = e2e;
await page.focus('#contenteditable');
await page.keyboard.type('Hello world');
await page.keyboard.down('Control');
await page.keyboard.down('Shift');
await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');
await page.keyboard.up('Control');
// Log screenshot
await page.keyboard.press('Backspace');
const remainingText = await page.textContent(
'#contenteditable',
);
expect(remainingText).toBe('Hello ');
});The screenshot just before backspace in Linux + FF on CI:
Here's out Github Actions config: name: Tests
on: [push]
jobs:
e2e:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: yarn install
- run: yarn build
- run: yarn test
env:
CI: true |
|
Interestingly, if I change the test case to be: await page.focus('#contenteditable');
await page.keyboard.type('Hello world');
await page.keyboard.down('Shift');
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('ArrowLeft');
await page.keyboard.up('Shift');It works fine on FF+Linux on CI. So it does seem like a bug with Playwright. |
|
I can repro it on 1.9.2 but not on tip of tree. Looks like it was fixed via the latest firefox roll. v1.10 should be coming shortly with the fix. Or you can install npm install playwright@next if you are impatient. |
|
@JoelEinbinder Awesome! Thanks :) |
|
This is so strange. With playwright@next, FF now passes for Linux on CI but fails when run locally on my Mac. |
|
Are you swapping ctrl for alt to get the correct shortcut on your mac?
…On Wed, Mar 24, 2021 at 2:23 PM Dominic Gannaway ***@***.***> wrote:
This is so strange. With ***@***.***, FF now passes for Linux on CI
but fails when run locally on my Mac.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#5929 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABDI62ND7MAXBOD7PKY5FATTFJJ4BANCNFSM4ZWBQHIQ>
.
|
|
@JoelEinbinder Yep, we use a function that detects platform and uses the right key. What's strange is that if I run in head mode and insert a debugger in the keydown listener on |
Context:
Code Snippet
Describe the bug
This was a strange issue for us. We encountered it on our CI that runs Linux and after playing around, we were able to determine that this only occurs for Firefox on Linux. Specifically, it also only seems to affect
contenteditable="true"nodes. It works fine for<input>elements.It seems that this does nothing in FF for Linux. The expected behavior is to select the word "world", as the keyboard shortcut Control + Shift + ArrowLeft is intended to do (works fine natively using Linux and contenteditables with FF).
Note: when we run this test, we are also running the same test on other browsers too. Could it be that there's a foreground issue with selection and FF?
The text was updated successfully, but these errors were encountered: