CODEWITHSUNDEEP
playwright
Machtyn
Machtyn

Reputation: 3282

playwright and using files in subdirectories

I'm trying to create a playwright test (in javascript) that uses the page object model of classes, but where the test and page object model aren't in the same directory path.

The problem I'm having is it can't find my page-object-model class file. The error is Error: Cannot find module './pom/home-page'. What am I missing or doing wrong?

My file setup and path structure are as follows:

/package.config.js

...
const config = {
   testDir: './test/playwright',
...

/test/playwright/pom/home-page.js

const { expect } = require ('@playwright/test');

exports.HomePage = class HomePage {
   constructor(page) {
      this.page = page;
      this.searchInput = page.locator('#searchInput');
      this.searchButton = page.locator('#searchButton');
   }
}

/test/playwright/scripts/home/search.spec.js

const {test, expect} = require('@playwright/test');
const {HomePage} = require('./pom/home-page');

test.beforeAll( async ({ page }) => { ... });
test.beforeEach( async ({ page }) => { ... });
test.afterAll( async ({ page }) => { ... });
test.describe( 'As a user I want to search', () => {
   test('"mySearchTerm1" and return {the expected result}', async ({ page }) => {
      const homePage = new HomePage(page); 
      ...
   });

   test('"mySearchTerm2" and return {the expected result}', async ({ page }) => {
      const homePage = new HomePage(page); 
      ...
   });
});

Upvotes: 1

Views: 4850

Answers (2)

senaid
senaid

Reputation: 650

Those using TypeScript can simplify this using tsconfig.json

https://playwright.dev/docs/test-typescript#manually-compile-tests-with-typescript

in tsconfig add:

    "baseUrl": ".",
    "paths":{
        "@pages/*":[
            "/test/playwright/pom/*"
        ]
   }

Then you can import it in your fixture or test file like this:

import { HomePage } from "@pages/home-page"

This can be used to shorten fixtures or other files.

Upvotes: 1

Machtyn
Machtyn

Reputation: 3282

So, apparently the file reference is relative to the directory the test is located, not the testDir directory defined in the config file. I need to change line 2 in search.spec.js

const {HomePage} = require('../../pom/home-page');

Upvotes: 1

Related Questions