Page MenuHomePhabricator

Create the first VisualEditor Selenium test
Open, In Progress, MediumPublic

Description

TODO

Event Timeline

@Ryasmeen could you please add a developer to this task that could help me set up VisualEditor in MediaWiki-Docker? See task description on what I have so far.

Change 345146 had a related patch set uploaded (by Zfilipin; author: Zfilipin):

[mediawiki/extensions/VisualEditor@master] WIP selenium: The first test

https://gerrit.wikimedia.org/r/345146

@zeljkofilipin I think for this to work, we need to finish T276428: Introduce non-voting jobs with quibble+apache (and also make those jobs voting, not sure if a task exists for that too, cc @awight & @hashar).

From what I can tell, the issue is that our current setup in CI uses PHP's built-in server, which is single-threaded. So when you make a request to click "Edit", there's a request by VisualEditor on the backend to Parsoid. That request can't be processed until the first one is dealt with, so the process hangs. Some background patches & comments with some investigation on this are here: https://gerrit.wikimedia.org/r/c/integration/quibble/+/553333, https://gerrit.wikimedia.org/r/c/integration/quibble/+/612937

(I came across this task because I'm working on a similar problem with VE/Parsoid in a test for https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/699705)

From what I can tell, the issue is that our current setup in CI uses PHP's built-in server, which is single-threaded.

Good find! This could be tested locally by running selenium against PHP standalone, and then against a multithreaded server...

Thanks for the work on this task, my team is interested in building a few VE browser tests once the infrastructure is available.

Change 701050 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[integration/config@master] zuul: Add Apache/Selenium job to experimental group for GrowthExperiments and VE

https://gerrit.wikimedia.org/r/701050

From what I can tell, the issue is that our current setup in CI uses PHP's built-in server, which is single-threaded.

Good find! This could be tested locally by running selenium against PHP standalone, and then against a multithreaded server...

Thanks for the work on this task, my team is interested in building a few VE browser tests once the infrastructure is available.

I can confirm locally that the tests (well, I didn't check this one specifically but I looked at others) will work with Quibble's setup if Apache is used as the web server. For some reason, using e.g. PHP_CLI_SERVER_WORKERS=4 quibble ... doesn't work โ€“ it creates 4 workers but the backend request that invokes the Parsoid service is executed on the same thread, so it's stalled.

As an aside, the reason we don't see the "Error contacting Parsoid / RESTBase" dialog in VisualEditor for this test and others like it is that Selenium times out before it appears (IIRC it's something like 20 seconds for that error dialog to appear, but Selenium quits after 5 seconds by default)

Change 701050 merged by jenkins-bot:

[integration/config@master] zuul: Add Apache/Selenium job to experimental group for GrowthExperiments and VE

https://gerrit.wikimedia.org/r/701050

Change 701346 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[integration/config@master] Add parsoid dependency to VisualEditor

https://gerrit.wikimedia.org/r/701346

Change 721024 had a related patch set uploaded (by Zfilipin; author: Zfilipin):

[mediawiki/extensions/VisualEditor@master] WIP VisualEditor should save an edit

https://gerrit.wikimedia.org/r/721024

zeljkofilipin changed the task status from Open to Stalled.EditedWed, Sep 15, 3:02 PM
zeljkofilipin removed zeljkofilipin as the assignee of this task.

VisualEditor is still not working in CI. Commit 721024 tries to make a small edit. Everything works fine until the edit actually needs to be saved. After Save page button is clicked nothing happens. The script waits 20 seconds, in case it just takes a long time, but it still doesn't save the page.

Here is the video of the test.

Change 721024 abandoned by Zfilipin:

[mediawiki/extensions/VisualEditor@master] WIP VisualEditor should save an edit

Reason:

just a test

https://gerrit.wikimedia.org/r/721024

Change 345146 abandoned by Zfilipin:

[mediawiki/extensions/VisualEditor@master] selenium: The first test

Reason:

visual editor doesn't work in CI, see T284165#7355537

https://gerrit.wikimedia.org/r/345146

Change 345146 restored by Zfilipin:

[mediawiki/extensions/VisualEditor@master] selenium: The first test

https://gerrit.wikimedia.org/r/345146

VisualEditor is still not working in CI. Commit 721024 tries to make a small edit. Everything works fine until the edit actually needs to be saved. After Save page button is clicked nothing happens. The script waits 20 seconds, in case it just takes a long time, but it still doesn't save the page.

Here is the video of the test.

Can you link to some documentation about how exactly it replaces the text in the editable area? Something weird happens to the text cursor (caret) in that video, and I suspect Selenium is somehow destroying VisualEditor's interface in a way that is impossible for a normal user to do by actually typing in the text. Alternatively, can you extract the browser console logs or exceptions that occurred?

I can help look into the issue here, but I want to mention that the Apache CI backend work was intended to fix almost exactly this use case. Current CI is hitting a single-threaded server, so if the save request needs to re-enter e.g. Parsoid making an internal API call, the action will hang forever. I'll check this by running "check experimental" in the current patch.

I'll check this by running "check experimental" in the current patch.

Single-threading seems to have been one of the obstacles. Now the failure is more interesting, a 404 about failing to contact Parsoid/RestBase.

Sharing a few loglines, this shows that RESTBase is configured and responds correctly when loading the editor,

2021-09-16T10:03:41	70807	250	POST	http://127.0.0.1/rest.php/127.0.0.1/v3/transform/html/to/wikitext/0.7111814743085103-I\xc3\xb1t\xc3\xabrn\xc3\xa2ti\xc3\xb4n\xc3\xa0liz\xc3\xa6ti\xc3\xb8n	application/json	-	VisualEditor-MediaWiki/1.38.0-alpha	en
2021-09-16T10:03:41	194791	292	POST	http://127.0.0.1:9413/api.php	application/json	http://127.0.0.1:9413//index.php?veaction=edit&vehidebetadialog=1&hidewelcomedialog=1&title=0.7111814743085103-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n	Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36	en-US,en;q=0.9

But when attempting to save, I believe we're redirecting off-server. At least, Apache never receives the redirected request. We could recreate this container to find the potential misconfiguration.

2021-09-16T10:03:46	39045	250	POST	http://127.0.0.1/rest.php/127.0.0.1/v3/transform/html/to/wikitext/0.7111814743085103-I\xc3\xb1t\xc3\xabrn\xc3\xa2ti\xc3\xb4n\xc3\xa0liz\xc3\xa6ti\xc3\xb8n	application/json	-	VisualEditor-MediaWiki/1.38.0-alpha	en
2021-09-16T10:03:46	130097	308	POST	http://127.0.0.1:9413/api.php	application/json	http://127.0.0.1:9413//index.php?veaction=edit&vehidebetadialog=1&hidewelcomedialog=1&title=0.7111814743085103-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n	Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36	en-US,en;q=0.9

Change 721024 restored by Kosta Harlan:

[mediawiki/extensions/VisualEditor@master] WIP VisualEditor should save an edit

https://gerrit.wikimedia.org/r/721024

Change 721024 abandoned by Kosta Harlan:

[mediawiki/extensions/VisualEditor@master] WIP VisualEditor should save an edit

Reason:

https://gerrit.wikimedia.org/r/721024

Apologies for the late reply.

Can you link to some documentation about how exactly it replaces the text in the editable area? Something weird happens to the text cursor (caret) in that video, and I suspect Selenium is somehow destroying VisualEditor's interface in a way that is impossible for a normal user to do by actually typing in the text.

Does this help? https://webdriver.io/docs/api/element/setValue/

Change 723246 had a related patch set uploaded (by Zfilipin; author: Zfilipin):

[mediawiki/extensions/VisualEditor@master] WIP selenium: addConsoleLogs

https://gerrit.wikimedia.org/r/723246

Alternatively, can you extract the browser console logs or exceptions that occurred?

723246 is trying to catch console logs, but when I've tested it locally, nothing was displayed. I'm not sure if I did something wrong, or there was nothing to log. I've pushed the commit to gerrit to see if anything will be logged.

723246 is trying to catch console logs

That doesn't seem to work. It might be possible with devtools-service + getPuppeteer.

There are few examples on how to get browser logs with puppeteer, for example https://stackoverflow.com/q/47539043/17469