Need advice on how to e2e test

Show
1

Currently running Angular/TipTap prosemirror. We have a customized schema that we want to write some e2e test for to keep stable. We need to be able to update the editor, press buttons, click things, etc.

I’ve tried Cypress, but had weird behavior when I tried to click in the editor. I’m currently using Playwright, but I get different behavior if I’m doing chromium vs Chrome. In Chrome, I can set the contents of the editor one time with page.locator('.ProseMirror').fill('foo bar'), but if I do it a second time, it just clears it out. I can’t seem to get ...pressSequentially(...). If I test in the chromium browser, I seem to be able to do a fill followed by pressSequentially, but I don’t have confidence that testing in chromium is as useful as Google Chrome.

Has anyone had luck with running playwright tests in an app that leverages ProseMirror? We really need testing to stay on top of the features we want to implement.

Thanks in advance!

2

I can confirm it was bit tricky to get typing working in prosemirror using Cypress, here’s a example of what worked for me:

  it('can insert a line break in the title', () => {
    cy.visit('http://localhost:1234/')
    .get('#editor > div > div.ProseMirror > article > h1')
    .click()
    cy.focused()
    .type('{leftArrow}{enter}title')
    .should('contain.html', '<br>')
  })

full script prosemirror-lwdita/packages/prosemirror-lwdita-demo/cypress/e2e/newline.cy.ts at main · evolvedbinary/prosemirror-lwdita · GitHub

3

Thanks. I might have made a breakthrough on playwright. We are still early enough that we could maybe go either Cypress or Playwright. Have you tried Playwright? Has Cypress has worked well for you in general?

4

I did not try Playwright as Cypress managed to do the job.