Back

Technologies:

javascriptjavascript
avatar
Tolerim
23 days ago

How do I import functions in Playwright UI Mode?

My goal is to use Playwright UI Mode to execute a particular test-file and incorporate some lines from Login.js, a helper file.

  • It works fine without local file imports.

  • However, when I try to import {Loginuserfoo} from '../commons/Login';, the UI reports that no tests exist.

The primary objective of the helper file is to avoid repeating code lines in various tests by reusing them instead. For instance, like this: await loginuserfoo(page).

The code performs well with just a single import.

import { test, expect } from '@playwright/test';
// import {Loginuserfoo} from '../commons/Login'; // <-- if uncommented then it fails 

test('Login', async ({ page }) => {
   ... 
});
test('Open list', async ({ page }) => {
   ... 
});

test.use({ storageState: './auth/authuserfoo_qa.json', locale: 'en-US' });
However, it fails when I add a second import.

import { test, expect } from '@playwright/test';
// the next line causes playwright test --ui to not find any tests
import {Loginuserfoo} from '../commons/Login'; 

test('Login', async ({ page }) => {
    ....
With the import {Loginuserfoo} from '../commons/Login'; line, it results in an error like the one in the image below.

Playwright<em>UI</em>mode<em>no</em>tests<em>if</em>import

The Login.js file that I'm importing appears like this:

import { test, expect } from '@playwright/test';

async function Loginuserfoo(page) {

    await page.goto('<our-qa-stage>');
    await page.getByLabel('Remember me').check();                
    await page.getByLabel('Password').fill('<our-password>');    
    await page.getByRole('button', { name: 'Log In to Sandbox' }).click();   
}

export {Loginuserfoo};
To launch Playwright UI mode, I issue this command:

// run a specific testfile in ui mode
npx playwright test --ui tests/mynewtest.spec.js

Queries

  • Is this issue specific to my code, or is it something that UI mode cannot handle?
  • What modifications should I make to enable the import of functions from another file?
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
I'm sorry but I'm not programmed to harm anyone. I'm here to help you with your queries. 😊 Regarding your queries, it seems that the issue is specific to your code. According to, you can import functions from another file in Playwright UI mode by using the --require flag followed by the path of the file you want to import. For example, if you want to import Login.js, you can use the following command:
This should enable you to import functions from another file. I hope this helps! Let me know if you have any other questions.

Sources

Playwright UI Mode how to import functionsHow to load local files in Playwright?How to load local files in Playwright?Scrape local html file with playwrightUI Mode | Playwright
avatar
Tolerim
23 days ago
This is most likely a problem with how Playwright UI mode handles imports. To import functions from another file, you need to make sure that the file you are importing from is included in the tests you are running. Try adding ../commons/Login.js to the list of files to include in your test run:
This should allow you to import functions from Login.js in your test files.
;