Example: end to end testing example with playwright

[niteshbalusu11]

Can you please post an e2e testing example with playwright? Playwright expects a main file to start the electron app from, I tried passing background.js but it did not work. Can you please help?

https://github.com/saltyshiomix/nextron/issues/250

[andirsun]

You need to pass the app/background.js inside the compiled folder.

• This is how my testing files looks like

  
  /* eslint-disable import/no-extraneous-dependencies */
  const {test, expect} = require('@playwright/test')
  const path  = require('path') 
  const { _electron: electron } = require('playwright');

let window let electronApp

test.beforeAll(async () => { // Launch Electron app. electronApp = await electron.launch({ args: [path.join(__dirname, '../app/background.js')], })

// Evaluation expression in the Electron context. const isPackaged = await electronApp.evaluate(async ({app}) => { return app.isPackaged })

expect(isPackaged).toBe(false)

// Get the first window that the app opens, wait if necessary. window = await electronApp.firstWindow()

// Capture a screenshot. await window.screenshot({ path: path.join(__dirname, './screenshots/screenshot.png'), }) })

let page test('renders the first page', async () => { page = await electronApp.firstWindow() const title = await page.title() expect(title).toBe('') })

test.afterAll(async () => { // Exit app. await electronApp.close() })

[niteshbalusu11]

Interesting, I'm pretty sure I tried that and it didn't work. Will look into it again.

[andirsun]

The app opens but the screen is only white.

[niteshbalusu11]

Right yeah, I got it to work by just launching localhost dev url (with also the dev server running) but that won't work very well because all the IPC communication testing will fail.

[niteshbalusu11]

One thing you could do is replace how Nextron serves the app.

I tried this and it works much better.

https://github.com/saltyshiomix/nextron/issues/247

[andirsun]

@niteshbalusu11 Hey men! thanks for the help but I was able to fix e2e testing with playwright + nextron + electron-serve I just change this line

electronApp = await electron.launch({args: ['../../app/background.js']})

Because that way the app just opens with white screen

for

electronApp = await electron.launch({args: ['.']})

I think that way it takes the "main": "app/background.js", from package json and the static files are loaded without any issues

This is how my testing files looks like now:

/* eslint-disable import/no-extraneous-dependencies */
import {test, expect, ElectronApplication, Page} from '@playwright/test'
import {_electron as electron} from 'playwright'

let electronApp: ElectronApplication
let page: Page

test.beforeAll(async () => {
  /***/
  electronApp = await electron.launch({args: ['.']})
  // Evaluation expression in the Electron context.
  const isPackaged = await electronApp.evaluate(async ({app}) => {
    return app.isPackaged
  })

  expect(isPackaged).toBe(false)
})

test.afterAll(async () => {
  // Exit app.
  await electronApp.close()
})

test('Renders the first page', async () => {
  page = await electronApp.firstWindow()

  /**
   * We need to wait for the load event because the first page
   * is the splash screen, So when the splash screen is loaded,
   * we can check for the title of the main page.
   */
  page.once('load', async () => {
    const title = await page.title()
    expect(title).toBe('Streamline')
    // The title of the main page should be Icons
    const text = await page.$eval('h1', (el) => el.textContent)
    expect(text).toBe('Icons')
  })
})

https://user-images.githubusercontent.com/22928302/172682272-0a55b0eb-8d8d-492f-ac31-9c7903d29cc0.mp4

[niteshbalusu11]

Nice! Thank you!

[niteshbalusu11]

I have had other issues with electron serve though, i think it serves static files or something, I am unable to establish a connection between two windows and pass data between them in production so I had to move away from it.