[Bug] Autologin hook called in Before(({ login }) causes "Cannot read properties of undefined (reading 'goto')" error in Playwright.amOnPage method

[alexeyhimself]

What are you trying to achieve?

Using https://codecept.io/plugins/#autologin instruction trying to run tests with autoLogin in Before directive with Playwright under the hood.

What do you get instead?

% npx codeceptjs run --verbose
***************************************
nodeInfo:  19.7.0
osInfo:  macOS 13.2
cpuInfo:  (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
chromeInfo:  119.0.6045.123
edgeInfo:  Not Found
firefoxInfo:  113.0
safariInfo:  16.3
If you need more detailed info, just run this: npx codeceptjs info
***************************************
CodeceptJS v3.5.7 #StandWithUkraine
Using test root "/Users/pro/Documents/repos/codeceptjs"
Helpers: Playwright
Plugins: screenshotOnFail, autoLogin, tryTo, retryFailedStep, retryTo, eachElement

My First Test --
    [1]  Starting recording promises
    Timeouts: 
 › [Session] Starting singleton browser session
  test something
    --- STARTED "before each" hook: Before for "test something" ---
 › Cannot save user session with empty cookies from auto login's fetch method
    I am on page "https://google.com"
    [1] Error | TypeError: Cannot read properties of undefined (reading 'goto')
    [1] Error | TypeError: Cannot read properties of undefined (reading 'goto')
    [1] <teardown> Stopping recording promises
 › <screenshotOnFail> Test failed, try to save a screenshot
 › Screenshot is saving to /Users/pro/Documents/repos/codeceptjs/output/_before_each_hook__Before_for_test_something.failed.png
 › <TypeError: Cannot read properties of undefined (reading 'screenshot')> 
  ✖ FAILED in 19ms

    [2]  Starting recording promises

-- FAILURES:

  1) "before each" hook: Before for "test something":
     Cannot read properties of undefined (reading 'goto')
      at Playwright.amOnPage (node_modules/codeceptjs/lib/helper/Playwright.js:906:21)
      at Step.run (node_modules/codeceptjs/lib/step.js:122:47)
      at /Users/pro/Documents/repos/codeceptjs/node_modules/codeceptjs/lib/actor.js:135:23
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  
  Scenario Steps:
  - I.amOnPage("https://google.com") at Object.login (./codecept.conf.js:30:15)
 
  FAIL  | 0 passed, 1 failed   // 621ms

// test
Before(({ login }) => {
  login('user');
});

Feature('My First Test');

Scenario('test something', ({ I }) => {
  I.amOnPage('https://github.com');
  I.see('GitHub');
});

Details

• CodeceptJS version: v3.5.7
• NodeJS Version: v19.7.0
• Operating System: macOS 13.2
• Configuration file:

// codecept.conf.js
const { setHeadlessWhen, setCommonPlugins } = require('@codeceptjs/configure');
// turn on headless mode when running with HEADLESS=true environment variable
// export HEADLESS=true && npx codeceptjs run
setHeadlessWhen(process.env.HEADLESS);

// enable all common plugins https://github.com/codeceptjs/configure#setcommonplugins
setCommonPlugins();

/** @type {CodeceptJS.MainConfig} */
exports.config = {
  tests: './*_test.js',
  output: './output',
  helpers: {
    Playwright: {
      browser: 'chromium',
      url: 'http://localhost',
      show: true
    }
  },
  plugins: {
    autoLogin: {
      enabled: true,
      saveToFile: true,
      inject: 'login',
      users: {
        user: {
          login: (I) => {
            I.amOnPage('https://google.com');
          },
          check: () => {},
          fetch: () => {}, // empty function
          restore: () => {}, // empty funciton
        }
      }
    }
  },
  include: {
    I: './steps_file.js'
  },
  name: 'codeceptjs'
}

[alexeyhimself]

I looked what's wrong at Playwright.js:906:21 and there we have:

await this.page.goto(url, { waitUntil: this.options.waitForNavigation });

and "this.page" is undefined there.

As I understand, codeceptjs Before() hook calls _beforeSuite() method in Playwright. But it calls only _startBrowser() method which does not set "page" object and thus "this.page" becomes undefined.

I manually changed Playwright _beforeSuite() to:

_beforeSuite() {
    if ((restartsSession() || restartsContext()) && !this.options.manualStart && !this.isRunning) {
      this.debugSection('Session', 'Starting singleton browser session');
      // return this._startBrowser();
      return this.restartBrowser();
    }
  }

and changed restartBrowser() to:

async restartBrowser(contextOptions) {
    // await this._stopBrowser();
    await this._startBrowser();
    await this._createContextPage(contextOptions);
}

and with these "fixes" my test with autoLogin started to run because restartBrowser() method inits "page" during _createContextPage.

Bug is not reproduced if we call login in a test:

Feature('My First Test');

Scenario('test something', ({ I, login }) => {
  login('user')
  I.amOnPage('https://github.com');
  I.see('GitHub');
});

because by this time "this.page" is already set in Playwright.

I don't know if this is a Playwright bug or a CodeceptJS bug (maybe we call something wrong from CodeceptJS for Playwright). So, I decided to start here, because steps to reproduce that I have are for CodeceptJS. Thanks

[kobenguyent]

I saw the issue. You shall put the Before block below the Feature

Feature('My First Test');

Before(({ login }) => {
  login('user');
});

Scenario('test something', ({ I }) => {
  I.amOnPage('https://github.com');
  I.see('GitHub');
});

[alexeyhimself]

Thank you for clarifications, @kobenguyent! Now it works 👍

Also it would be great if someone could adjust documentation to tell about the importance of this placement, because now there's no chance to know about that from the doc:

Thank you!

[kobenguyent]

Thank you @alexeyhimself I guess this will solve the ambiguousness.