Using POM with Playwright

[Romarionijim]

Version info:

<version>

"artillery": "^2.0.11",
  "artillery-engine-playwright": "^1.8.0",

Running this command: 

`npx artillery run LoginFlowPerfTest.yml ` OR `BASE_URL=https://www.saucedemo.com npx artillery run LoginFlowPerfTest.yml `

I expected to see this happen:

load test for this website when navigating to it

Instead, this happened:

I get the following error:
`errors.Cannot read properties of undefined (reading 'goto'): ................... 1
vusers.created: ................................................................ 1
vusers.created_by_name.0: ...................................................... 1
vusers.failed: ................................................................. 1

Warning: multiple batches of metrics for period
All VUs finished. Total time: 1 second

---

Summary report @ 19:14:23(+0300)

errors.Cannot read properties of undefined (reading 'goto'): ................... 1
vusers.created: ................................................................ 1
vusers.created_by_name.0: ...................................................... 1
vusers.failed: ................................................................. 1`

Files being used:
LoginPage:

import { expect } from "@playwright/test";
import { BasePage } from "./BasePage";

export class LoginPage extends BasePage {
  private userNameField = '#user-name';
  private passwordField = '#password';
  private loginButton = '#login-button'

  public async login(userName: string = process.env.USERNAME as string, password: string = process.env.PASSWORD as string) {
    await this.fillText(this.userNameField, userName);
    await this.fillText(this.passwordField, password);
    await this.clickElement(this.loginButton);
  }

  public async validateUrl(url: string) {
    const currentUrl = await this.getPageUrl();
    expect(currentUrl).toContain(url);
  }
}

loginFlow.ts (proccessor):

import { LoginPage } from "../../ui-automation/pages/LoginPage";

export async function loginFlow({ page }) {
  let loginPage = new LoginPage(page)
  await loginPage.loadApp();
  await loginPage.login();
}

yml file test:

config:
  target: https://www.saucedemo.com/
  engines:
    playwright: {}
  processor: '../../../artillery/processors/LoginFlow.ts'
scenarios:
  - engine: playwright
    testFunction: 'loginFlow'`

P.S - the url is defined, I tested it in a UI scenario and in the CLI and it works as expected, the url is defined in a dotenv file, I also tried providing the BASE_URL in the CLI when running artillery as mentioned above but im getting the error that is mentioned above.

[bernardobridge]

The processor function you export (loginFlow) needs to follow Artillery's function signature (https://www.artillery.io/docs/reference/engines/playwright#test-function-api). Try something like:

import { LoginPage } from "../../ui-automation/pages/LoginPage";

// note the argument change from {page} to page
export async function loginFlow(page) {
  let loginPage = new LoginPage(page)
  await loginPage.loadApp();
  await loginPage.login();
}

---

Unrelated, but I noticed you seem to be installing the artillery-engine-playwright package. There's no need to do that, as Artillery already includes it by default.

[Romarionijim]

@bernardobridge I tried to adjust it and run it again,it still has an issue reading from an env file, it does not reads the username and password from the env file.
again, these test pass without any issues in ui tests and the env is defined and credentials are read but for some reason artillery is not picking them out i get the following error:

⠏ locator.fill: value: expected string, got undefined
    at LoginPage.fillText (/Users/romario/Desktop/pw-projects/ui-automation/pages/BasePage.ts:31:26)
    at LoginPage.login (/Users/romario/Desktop/pw-projects/ui-automation/pages/LoginPage.ts:10:5)
    at loginFlow (/Users/romario/Desktop/pw-projects/artillery/processors/LoginFlow.ts:7:3)
    at async Array.scenario (/Users/romario/Desktop/pw-projects/node_modules/artillery-engine-playwright/index.js:340:11)
--------------------------------------
Metrics for period to: 21:00:00(+0300) (width: 2.6s)
--------------------------------------`

for a work around I had to type these username and password hardcoded like this:

import { Page } from "@playwright/test";
import { LoginPage } from "../../ui-automation/pages/LoginPage";

export async function loginFlow(page:Page) {
  let loginPage = new LoginPage(page)
  await loginPage.loadApp();
  await loginPage.login('secret_sauce','secret_sauce');
} 

why is it not reading from the env file?

[bernardobridge]

@Romarionijim you can use the --dotenv flag to provide a path to a dotenv file for Artillery to load.

[Romarionijim]

@bernardobridge I still havn't tried this suggestion yet but it is still a workaround and does not solve the actual issue, if I'm running the test in CI I would only reference the env variables that are stored as secrets and that's it, I think it's an overhead specifying paths since it is a place for errors - this should read the dotenv file.

[bernardobridge]

@Romarionijim there is no "actual issue" as far as I can tell. This isn't a "workaround", it's how it works:

• If you have secrets specified in your CI, simply continue to reference secrets with process.env.VARIABLE_NAME in your test code (same as you would if you're using .env), and if they're defined in CI they'll resolve properly. No need to use the flag.
• If for local development you prefer to use a .env file, then simply add the --dotenv flag to your command.

[servohatred]

I can confirm that this is not an issue, I have been using env variables on CI and locally with dotenv with multiple projects for months and never had any issue.

[bernardobridge]

Converted this to a discussion, as there's currently no evidence of any issue. We can continue discussing here, and feel free to open an actual issue if you encounter it.

[msachinshelke]

I am encountering the same issue with my code:

artilleryLogin.ts:

import { Page } from 'playwright';

export async function artilleryLoginScript(page: Page) {
    console.log("Starting artilleryLoginScript...");
    await page.goto('http://localhost:3000/signin'); // application locally up
    console.log("Navigated to signin page");
    await page.getByLabel('Email').fill('XXXXXXXX);
    await page.getByLabel('Password').fill('XXXXX');
    await page.getByRole('button', { name: 'Login' }).click();
    console.log("Clicked login button");
    await page.getByRole('link', { name: 'Choose Client Inc.' }).getByRole('button').click();
    console.log("Clicked client button");

}

artillery.yml: (Formatting may be changed while adding comments, but I followed all the correct indentation):

config:
  target: http://localhost:3000
  engines:
    playwright: {}
  processor: '../artillery/artilleryLogin.ts'
scenarios:
  - engine: playwright
    function: 'artilleryLoginScript'

ERROR:

Test run id: ty53q_hed4xwpxb6n55cwtckpdtnjkryppn_77jc
Bundled Typescript file into JS. New processor path: /Volumes/Code/vrm-web-qa/artillery/dist/artilleryLogin.js
Phase started: unnamed (index: 0, duration: 1s) 18:30:58(+0530)

Phase completed: unnamed (index: 0, duration: 1s) 18:30:59(+0530)

⠴ Playwright test function not found: undefined
--------------------------------------
Metrics for period to: 18:31:00(+0530) (width: 0.708s)
--------------------------------------

vusers.created: ................................................................ 1
vusers.created_by_name.0: ...................................................... 1
vusers.failed: ................................................................. 1


Warning: multiple batches of metrics for period 1720702850000 2024-07-11T13:00:50.000Z
All VUs finished. Total time: 2 seconds

--------------------------------
Summary report @ 18:31:01(+0530)
--------------------------------

vusers.created: ................................................................ 1
vusers.created_by_name.0: ...................................................... 1
vusers.failed: ................................................................. 1

I also tried using a config.json file to convert TypeScript to JavaScript, but it did not work. Please help.

[msachinshelke]

@bernardobridge any idea to fix above issue

[bernardobridge]

Hello @msachinshelke

We recommend checking the documentation to help you understand what you can and can't use in your test script. You're using the function key in your YAML, but it should be testFunction:

config:
  target: http://localhost:3000
  engines:
    playwright: {}
  processor: '../artillery/artilleryLogin.ts'
scenarios:
  - engine: playwright
    testFunction: 'artilleryLoginScript'

[msachinshelke]

tried using testFunction, but encountered the same issue.

[bernardobridge]

Hi @msachinshelke , I can't reproduce that issue.

I recommend double checking that the relative path to your processor is correct, that the key (testFunction is correctly indented and written), and that the name of the function is correctly written in the ts file. You should only get that error (Playwright test function not found) when it can't find the function..

[msachinshelke]

Yes its resolved now thanks