[BUG] github secrets are "undefined" instead of a string in ci

[manuelriveragax]

Context:

• Playwright Version: ["^1.18.1"]
• Operating System: [Windows]
• Node.js version: [14]
• Browser: [Chromium]

Code Snippet

yml file

name: Playwright E2E Tests

on:
  workflow_dispatch:
    inputs:
      test_suite:
        type: choice
        description: 'Relative path folder with the tests'
        default: src/tests/e2e
        options:
          - src/tests/e2e/admin
          - src/tests/e2e/selfSignUp
      environment:
        type: choice
        description: 'Environment to run the tests in'
        default: staging
        options: 
          - development
          - staging
          - production

      maestro_web_branch:
        description: 'Maestro-web branch to run the tests with'
        default: master

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
          cache: 'npm'

      - name: Install dependencies    
        run: npm ci

      - name: Install Playwright
        run: npx playwright install --with-deps

      - name: Run tests
        run: npx playwright test ./${{github.event.inputs.test_suite}}/*.spec.ts --config=playwright.${{github.event.inputs.environment}}.config.ts
        env: 
          TEST_ENV: ${{ github.event.inputs.environment}}      
          MAESTRO_WEB_BRANCH: ${{ github.event.inputs.maestro_web_branch }}
          QA_ADMIN_EMAIL: ${{ secrets.QA_ADMIN_EMAIL }}
          QA_ADMIN_PASSWORD: ${{ secrets.QA_ADMIN_PW }}

      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v2
        with:
         name: playwright-results
         path: test-results/    

      - name: Slack Notification
        if: always()
        uses: rtCamp/action-slack-notify@v2
        env:
          SLACK_CHANNEL: qa-team
          SLACK_COLOR: ${{ job.status }} # or a specific color like 'green' or '#ff00ff'
          SLACK_ICON: https://github.com/rtCamp.png?size=48
          SLACK_MESSAGE: ':goat: Playwright for :desktop_computer:${{ github.event.inputs.environment}} :goat: https://lessthan3.github.io/maestro-playwright-qa/${{ github.run_number }}/'
          SLACK_TITLE: Report [run on ${{ github.event.inputs.environment}}] using ${{ github.event.inputs.maestro_web_branch }}]
          SLACK_USERNAME: rtCamp
          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

Error in the GitHub action

 locator.fill: value: expected string, got undefined

      14 |       login = new Login(page);
      15 |       await inviteAdminPage.goToHome();
    > 16 |       await login.loginFlow(user, pw);
         |       ^
      17 |     });
      18 |     
      19 |     test.afterEach(async ({}, testInfo) => {``   

Describe the bug

I can see the email value being filled in the trace file, but when it gets to the password input field it crashes. Also tried hard coding the values in the yml file with the same result. It works fine locally using a .env file.

[markomaestral]

Shouldn't the approach to environment variables be in the form process.env.QA_ADMIN_EMAIL?

[manuelriveragax]

Shouldn't the approach to environment variables be in the form process.env.QA_ADMIN_EMAIL?

Spec file

import { test, expect } from "@playwright/test";
import { InviteAdminPage } from '@pageObjects/admin';
import { Login } from '@utils/index';
import  AdminUser from '@personas/adminUser';

test.describe("Login", () => {
  let inviteAdminPage: InviteAdminPage;
  let login: Login;
  const user = AdminUser.email;
  const pw = AdminUser.password;  

  test.beforeEach(async ({ page, browser, context }, testInfo) => {
      inviteAdminPage = new InviteAdminPage(page, browser, context);
      login = new Login(page);
      await inviteAdminPage.goToHome();
      await login.loginFlow(user, pw);
    });

    test.afterEach(async ({}, testInfo) => {
      await inviteAdminPage.page.close(); 
    });

    test("Verifies if the admin menus are loading", async ({}) => {
      await inviteAdminPage.openInviteAdminMenu();
      await expect(inviteAdminPage.emailTextInput).toBeVisible();
      await expect(inviteAdminPage.emailTextInput).toHaveValue('');
    });
});

AdminUser class

import 'dotenv/config';
class AdminUser {    
    email: string;
    password: string;

    constructor(email: string, password: string){
        this.email = email;
        this.password = password;
    }
}
export default new AdminUser(process.env.QA_ADMIN_EMAIL, process.env.QA_ADMIN_PW)

They are being used in the form of process.env.QA_ADMIN_EMAIL

[yury-s]

You have a typo in this line:

export default new AdminUser(process.env.QA_ADMIN_EMAIL, process.env.QA_ADMIN_PW)

should be

export default new AdminUser(process.env.QA_ADMIN_EMAIL, process.env.QA_ADMIN_PASSWORD)

to match you yml file.

[manuelriveragax]

MY BAD! thanks, love playwright keep up the good work 😄