CODEWITHSUNDEEP
electronplaywrightplaywright-test
clark flores
clark flores

Reputation: 51

Electron desktop application testing with Playwright

I'm attempting to use playwright to automate an electron js application, but I can't seem to find any relevant information. To automate a simple programme, I used playwright:- https://playwright.dev/docs/api/class-electron and https://www.electronjs.org/docs/latest/tutorial/quick-start. However, I am unable to obtain the elements (buttons, dropdowns, and so on) in the electron application. Any reference or documentation that will deeply guide me to automate desktop application using playwright.

Upvotes: 5

Views: 4932

Answers (1)

user4085203
user4085203

Reputation:

I got mine to work using their intro guide for me since the installer installs additional components, i had to build and install, then supply the path to the exe

in my package.json i have.

"playwright": "^1.25.0",
"@playwright/test": "^1.25.0",
"eslint-plugin-playwright": "^0.10.0",

I created this class to help me have a cleaner code.

import { _electron as electron, ElectronApplication, Page } from 'playwright';
class ElectronAppController {
  static electronApp: ElectronApplication;
  static window1: Page;
  static window2: Page;
  static window3: Page;

  static async launchApp() {
    ElectronAppController.electronApp = await electron.launch({
      executablePath: 'C:\\pathTo\\app.exe',
    });
    ElectronAppController.electronApp.on('window', async (page) => {
      ElectronAppController.assignWindows(page);
    });
    const mywindows: Page[] =
      await ElectronAppController.electronApp.windows();
    for (
      let index = 0, l = mywindows.length;
      index < l;
      index += 1
    ) {
      ElectronAppController.assignWindows(
        mywindows[index]
      );
    }
  }

  private static assignWindows(page: Page) {
    const myurl = path.basename(page.url());
    if (myurl === 'window1.html') {
      ElectronAppController.window1= page;
    }
    if (myurl === 'window2.html') {
      ElectronAppController.window2= page;
    }
    if (myurl === 'window3.html') {
      ElectronAppController.window3= page;
    }
    return true;
  }
}

the test file name should be [name].spec.ts, don't forget to import

test.describe('First Window Tests', async () => {
  test.beforeAll(async () => {
    await ElectronAppController.launchApp();
  });

  test('Check if first window opened', didLaunchApp);

  test('name of the test', async () => {
    // test body
    // this will allow you to record a test very useful, but sometimes it has some problems check note bellow 
    await ElectronAppController.window1.pause;
  });
  
  test.afterAll(async () => {
    await ElectronAppController.electronApp.close();
  });
});

here is a didLaunchApp just as a simple test

const didLaunchApp = async () => {
  const isVisible: boolean = await ElectronAppController.electronApp.evaluate(
    async ({ BrowserWindow }) => {
      const mainWindow = BrowserWindow.getAllWindows()[0];
      const getState = () => mainWindow.isVisible();

      return new Promise((resolve) => {
        if (mainWindow.isVisible()) {
          resolve(getState());
        } else {
          mainWindow.once('ready-to-show', () => {
            setTimeout(() => resolve(getState()), 0);
          });
        }
      });
    }
  );
  await expect(isVisible).toBeTruthy();
};

you can record tests but sometimes that might make some problems if you have some popups or other effects on hovering over an element,

you can read more about selectors here

Upvotes: 3

Related Questions