0

So I followed this guide to starting Playwright with Cucumber-JS and instead pointed to my company's website; however, the page never seems to load, even if I set the timeout to something ridiculous (like 1,000,000 ms)

I don't know why my page never seems to load when using the await, but removing the await it can't find the next part. Here's my code to show you what I mean:

Step Definitions file (steps.js)

const { Before, Given, When, Then } = require("@cucumber/cucumber");
const playwright = require("@playwright/test");
var page;

Before( async function() {
    var browser = await playwright.chromium.launch({
        headless: false,
    });
    var context = await browser.newContext();
    page = await context.newPage();
});

Given("a {string} is not logged in", { timeout: 1000 * 1000 }, async function (stringParam) {
    await page.goto('[MY-WEBSITE]');
    await page.getByText("[SOME-TEXT-TO-VERIFY-I-AM-AT-MY-WEBSITE]");
});

When("a {string} signs in at the start", { timeout: 1000 * 1000 }, async function (stringParam) {
    await page.getByText('Enter your email');
    page.getByText('Enter your email').fill("[FILL-IN-FORM-HERE]");

    await page.getByText('Password (8+ characters)');
    page.getByText('Password (8+ characters)').fill("[FILL-IN-FORM-HERE]");

    await page.getByText('Join now for free');
    page.getByText('Join now for free').click();
});

Feature file (login.feature)

Feature: MY-FEATURE
    Scenario Outline: Sign in to the webpage from the signed-out home screen
        Given a "<UserType>" is not logged in
        When a "<UserType>" signs in at the start
        Then the user is signed in
        Examples:
            | UserType |
            | User1    |

Command I use to run:

./node_modules/.bin/cucumber-js --exit

Console output:

.F-

Failures:

1) Scenario: Sign in to the website from the signed-out home screen # features/login.feature:15
   ✔ Before # features/support/steps.js:5
   ✖ Given a "User1" is not logged in # features/support/steps.js:13
       page.goto: Timeout 30000ms exceeded.
       =========================== logs ===========================
       navigating to "[MY-WEBSITE]", waiting until "load"
       ============================================================
           at World.<anonymous> (/Users/sam.levene/Git/playwright-poc/features/support/steps.js:14:16)
   - When a "User1" signs in at the start # features/support/steps.js:18

My page is fairly simple, with a pretend login form that has these fields upon loading of the page; so it shouldn't take an age to load (especially because the backend of the page is driven by PHP)

Can anyone help me explain why the await never seems to work and the page never loads inside the timeout?

Raisus
  • 148
  • 3
  • 23
  • What's the page, please? You might try `{waitUntil: "domcontentloaded"}` or run headfully to debug. – ggorlen Mar 20 '23 at 16:06
  • You've specified the URL (in your case: "[MY-WEBSITE]") for goto function. You should pass the URL. Therefore, error log is stating: `navigating to "[MY-WEBSITE]", waiting until "load"` – jkalandarov Mar 21 '23 at 06:59
  • Thanks for the comments, however, it was an issue with Playwright and CucmberJS's default timeout as well as the fact that, for whatever reason, the website we're visiting has an issue with automated browsers; as it tends to be very slow on initial load on these browsers (but not if you try it yourself on your physical browser) – Raisus Mar 21 '23 at 08:09

1 Answers1

0

In the end the issue, it seems, was an issue with Playwright and CucmberJS's default timeout as well as the fact that, for whatever reason, the website I was visiting has an issue with automated browsers; as it tends to be very slow on initial load on these browsers (but not if you try it yourself on your physical browser)

To combat this, I increased the default timeout in the playwright.config.js to:

  timeout: 120000,

and added the following code into my tests:

Given("a {string} is not logged in", { timeout: 120000 }, async function (stringParam) {
    await page.goto('[MY-WEBSITE]', { timeout: 120000 });
    await page.getByText("[SOME-TEXT-TO-VERIFY-I-AM-AT-MY-WEBSITE]");
});

When("a {string} signs in at the start", { timeout: 120000 }, async function (stringParam) {
    await page.getByText('Enter your email');
    page.getByText('Enter your email').fill("[FILL-IN-FORM-HERE]");

    await page.getByText('Password (8+ characters)');
    page.getByText('Password (8+ characters)').fill("[FILL-IN-FORM-HERE]");

    await page.getByText('Join now for free');
    page.getByText('Join now for free').click();
});

which seems to resolve the issue as the page does eventually load within 2 minutes (it's not pretty, but at least it works and I can identify why my page has such an issue on initial load)

Raisus
  • 148
  • 3
  • 23