e2e-utils-playwright : When giving external URL instead of docker site created by WP SCRIPT, given REST API endpoints give 400 error

[juhi123]

Description

Recently we have published our e2e-utils-playwright package to npm to enable the third-parties to adapt this in their organization, for that they should be able to test the E2E tests with their URL.

But when adding URL and running the tests, site-url/wp-admin/admin-ajax.php?action=rest-nonce giving 404 error, a screenshot attached

@kevin940726 @justintadlock would you mind checking this?

Step-by-step reproduction instructions

For testing purpose, I have added .env file in Gutenberg root

1. Add .env file
2. Add require('dotenv').config(); in playwright.config.ts

Screenshots, screen recording, code snippet

Environment info

For testing using a test site created on https://tastewp.com/, may expire soon

Though I have tried with several localhost sites and live site and getting the same issue

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[joostdekeijzer]

I'm experiencing similar issues.

I think it arises from https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-test-utils-playwright/src/config.ts where WP_ADMIN_USER is set hard-coded and not configurable by process.env.

Further in the code WP_ADMIN_USER is used and not WP_USERNAME or WP_PASSWORD.

I'm not very fluent in TypeScript but changing the javascript to my example below fixes the issue for me.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WP_BASE_URL = exports.WP_PASSWORD = exports.WP_USERNAME = exports.WP_ADMIN_USER = void 0;

const { WP_USERNAME = 'admin', WP_PASSWORD = 'password', WP_BASE_URL = 'http://localhost:8889', } = process.env;
const WP_ADMIN_USER = {
    username: WP_USERNAME,
    password: WP_PASSWORD,
};
exports.WP_ADMIN_USER = WP_ADMIN_USER;
exports.WP_USERNAME = WP_USERNAME;
exports.WP_PASSWORD = WP_PASSWORD;
exports.WP_BASE_URL = WP_BASE_URL;
//# sourceMappingURL=config.js.map

[juhi123]

Hi @joostdekeijzer

Thanks for sharing it. Yeah, it seems WP_ADMIN_USER was hardcoded and hence it wasn't working. However, I have tried testing your PR and it didn't seem to be working and was throwing errors.
Block-scoped variable 'WP_ADMIN_USER' used before its declaration,
It indicates that you are trying to access the WP_ADMIN_USER variable before it has been defined. This error occurs when the variable is declared using const and you are trying to use it in the same block or scope before its assignment.

With little modification, I was able to solve this issue. Now with the new PR, it seems to be working perfectly fine.

[joostdekeijzer]

Hi @juhi123,

Yes, sort of typo 🙄 That's what happens when you try a quick edit online without testing environment...

[juhi123]

Yeah, I can relate 😄 @joostdekeijzer