Upgrading to Serenity/JS 3

[waleedKhalidCalrom]

I am getting this Problem After Upgrading to Serenity JS 3 . I am using Serenity JS 3 + Jasmin + protractor

Here is my Protractor.conf.js

const
  { login } = require('./login'),
  path = require('path'),
  isCi = require('is-ci'),
  { ConsoleReporter } = require('@serenity-js/console-reporter'),
  { ArtifactArchiver } = require('@serenity-js/core'),
  { SerenityBDDReporter } = require('@serenity-js/serenity-bdd'),
  { Photographer, TakePhotosBeforeAndAfterInteractions } = require('@serenity-js/web');

const shouldBeHeadless = process.env.HEADLESS || isCi;

/**
 * @type { import("protractor").Config }
 */
exports.config = {
  chromeDriver: require('chromedriver/lib/chromedriver').path,
  SELENIUM_PROMISE_MANAGER: false,

  directConnect: true,

  allScriptsTimeout: 11000,

  specs: [
    'spec/**/*.spec.ts'
  ],

  params : {
    fakegds: {
      enabled: true,
      record: false,
    }
  },

  framework: 'custom',
  frameworkPath: require.resolve('@serenity-js/protractor/adapter'),

  serenity: {
    runner: 'jasmine',
    crew: [
      ArtifactArchiver.storingArtifactsAt('./target/site/serenity'),
      new SerenityBDDReporter(),
      ConsoleReporter.withDefaultColourSupport(),
      Photographer.whoWill(TakePhotosBeforeAndAfterInteractions),
    ]
  },

  jasmineNodeOpts: {
    requires: [
      'ts-node/register',
      path.resolve(__dirname, 'node_modules/@serenity-js/jasmine'),
    ],
    helpers: [
      'spec/config/*.ts'
    ],
    showColors: true,
    defaultTimeoutInterval: 120000,
  },

  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      'args':
        [
          '--no-sandbox',
          '--disable-infobars',
          '--disable-gpu',
          '--disable-dev-shm-usage',
          '--start-maximized',
          'disable-extensions'
        ].concat(shouldBeHeadless ? ['--headless'] : []),
    },
    shardTestFiles: true,
    maxInstances: 2,
    Build: 'protractor-retry-' + process.env.TRAVIS_BRANCH + '-' + process.env.TRAVIS_BUILD_NUMBER,
    name: process.env.TRAVIS_BRANCH + '-' + process.env.TRAVIS_BUILD_NUMBER
  },
  baseUrl: process.env.BASEURL || 'http://localhost:8080',

  onCleanUp: async function (results) {
    await retry.onCleanUp(results);
  },
  onPrepare: async function () {
    //// retry configuration
    browser.manage().window().setSize(1600, 1050);

    //// create custom locator to find the elements with data-qa attributes
    by.addLocator('qa', function (value, parentElement) {
      parentElement = parentElement || document;
      var nodes = parentElement.querySelectorAll('[data-qa]');
      return Array.prototype.filter.call(nodes, function (node) {
        return (node.getAttribute('data-qa') === value);
      });
    });

    await login();

    // Disable wait for angular in all tests.
    // Something in the oidc-client is causing it to wait
    // indefinitely and the tests time out.
    await browser.waitForAngularEnabled(false);
  },
};

here is Package.Json

{
  "name": "acceptance-tests",
  "version": "1.0.0",
  "description": "Acceptance tests",
  "private": true,
  "config": {
    "access": "private"
  },
  "scripts": {
    "clean": "rimraf target",
    "lint": "eslint . --ext .ts --format stylish",
    "test:update-serenity": "serenity-bdd update --ignoreSSL",
    "test:acceptance": "protractor ./protractor.conf.js",
    "test:report": "serenity-bdd run",
    "test": "failsafe lint clean test:update-serenity test:acceptance test:report",
    "verify": "npm test"
  },
  "devDependencies": {
    "@types/jasmine": "^5.1.4",
    "@types/jest": "^29.5.11",
    "@types/node": "^18.19.3",
    "@typescript-eslint/eslint-plugin": "^6.15.0",
    "@typescript-eslint/parser": "^6.15.0",
    "chromedriver": "^120.0.0",
    "dayjs": "^1.11.9",
    "eslint": "^8.56.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jasmine": "^4.1.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "is-ci": "^2.0.0",
    "jasmine-reporters": "^2.5.2",
    "npm-failsafe": "^1.2.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "@serenity-js/assertions": "^3.14.2",
    "@serenity-js/console-reporter": "^3.14.2",
    "@serenity-js/core": "^3.14.2",
    "@serenity-js/jasmine": "^3.14.2",
    "@serenity-js/local-server": "^3.14.2",
    "@serenity-js/protractor": "^3.14.2",
    "@serenity-js/rest": "^3.14.2",
    "@serenity-js/serenity-bdd": "^3.14.2",
    "@serenity-js/web": "^3.14.2",
    "jasmine": "^5.1.0",
    "protractor": "^7.0.0"
  }
}

[jan-molak]

Hi @waleedKhalidCalrom! It's great you're upgrading your automation project to the latest version of Serenity/JS!

With Serenity/JS 3, you don't need to add the Serenity/JS Jasmine reporter manually as the Protractor (or WebdriverIO) adapter will do this for you. You can remove the following line:

  jasmineNodeOpts: {
    requires: [
      'ts-node/register',
-     path.resolve(__dirname, 'node_modules/@serenity-js/jasmine'),
    ],
    helpers: [
      'spec/config/*.ts'
    ],
    showColors: true,
    defaultTimeoutInterval: 120000,
  },

You might also find the following resources useful:

• serenity-js-jasmine-protractor-template reference implementation
• Serenity/JS Upgrade Guide

Let me know if this helps!

[waleedKhalidCalrom]

@jan-molak I have successfully integrated Playwright configuration and set up an authentication file named global-setup.ts. When I run the tests, the Login Page opens, and the login process is successful. However, after logging in, the browser closes. Subsequently, the other tests are executed, but the browser does not navigate to the specific page as expected.

Then I am getting this error.

Here is playwright.conf.js

import { devices } from '@playwright/test';
import type { PlaywrightTestConfig } from '@serenity-js/playwright-test';

const config: PlaywrightTestConfig = {
    testDir: './spec/',
    testMatch: 'booking-creation-amadeus-itr.spec.ts',
    timeout: 30_000,
    expect: {
             timeout: 5000,
    },
    fullyParallel: true,
    forbidOnly: !!process.env.CI,
    retries: process.env.CI ? 2 : 0,
    workers: process.env.CI ? 1 : undefined,
    reporter: [
        ['line'],
        ['html', { open: 'never' }],
        ['@serenity-js/playwright-test', {
            crew: [
                '@serenity-js/console-reporter',
                '@serenity-js/serenity-bdd',
                ['@serenity-js/core:ArtifactArchiver', { outputDirectory: 'target/site/serenity' }],
                // '@serenity-js/core:StreamReporter',  // use for debugging
            ],
        }],
    ],
    use: {
        baseURL:  process.env.BASEURL || 'http://localhost:8080',    
        headless: false,
        defaultActorName: 'E2E',
        crew: [
            [ '@serenity-js/web:Photographer', { strategy: 'TakePhotosOfFailures' }],
        ],
        actionTimeout: 0,    
        trace: 'on-first-retry',
    },
    projects: [
        { name: "setup",
          testDir: "./",
          testMatch: "global-setup.ts"
        },
        {
            name: 'chromium',
            dependencies: ["setup"],
            use: {
                ...devices['Desktop Chrome'],
                storageState: "./LoginAuth.json"
            },
        },
    ],
};
export default config

global-setup.ts

import { test as setup } from '@serenity-js/playwright-test'

const BASE_URL = process.env.URL;
setup('authenticate', async ({ page }) => {
  await page.goto(BASE_URL ?? '');
  await page.locator("#Username").fill('AutoTest');
  await page.locator('#Password').fill('b92LeuLkrcPjTJ4qMZAvE5645NTEaw');
  await page.locator('.login__submit').click();
  await page.waitForURL('**/landing');

  // End of authentication steps.

  await page.context().storageState({ path: "./LoginAuth.json" });
});

This is the task which navigate to landing page but did not work

import { equals } from '@serenity-js/assertions';
import { Duration, Task, Check, Wait} from '@serenity-js/core';
import { Click, Enter, isVisible, Navigate, Text } from '@serenity-js/web';
import dayjs = require('dayjs');


export const NavigateToLanding = () =>
    Task.where(`#actor navigates to landing`,
        Navigate.to('http://localhost:8080' + '/landing'));

Because when trying to Navigate It goes to authentication and authentication failed.

I appreciate it. If you could take a look and suggest any solutions, that would be great

[waleedKhalidCalrom]

@jan-molak any Idea about above issue.

[jan-molak]

Your code looks OK at first glance (I edited your question to use code blocks to make it easier to read, but haven't made any other changes).

Would you be able to create a reproducible example by any chance so that I could try to run it locally?
The "Execution context was destroyed" message looks suspicious; perhaps something closes the browser window, or some command times out before the assertions has a chance to run?

You could try to apply the pattern you use with .storageState against a public-facing demo site, like "The Internet: Login Form example" if you need a sandbox.

[waleedKhalidCalrom]

Thanks @jan-molak Navigation work now.
I am currently facing an issue with Playwright wherein a new browser instance opens for each test, disrupting the flow of my code. I have explored potential solutions, including implementing 'describe.serial,' but regrettably, it has not yielded the desired result. I am seeking guidance on how to prevent the browser from opening for each test, and any assistance in resolving this matter would be greatly appreciated.

I have Also tried this but failed to achieve

beforeAll(async ({ browser })  => {
    page = await browser.newPage();
    await page.goto('http://localhost:8080');
  });

https://stackoverflow.com/questions/69572778/playwright-browser-is-reopening-every-test-statement

import { beforeAll, beforeEach, describe, it, test } from '@serenity-js/playwright-test'
import { NavigateToLandingPage } from '../landing/landing.spec';

import { Page } from '@playwright/test';
describe.serial('test describe', () => {
  let page: Page;
  beforeAll(async ({ browser })  => {
    page = await browser.newPage();
    await page.goto('http://localhost:8080');
  });

  NavigateToLandingPage();

  // it('test', ({actor}) =>
  //   actor.attemptsTo(
  //     testSession(scenario.scenarioId)));
});

NavigateToLandingPage is also a spec wich I am calling above code .

import { describe, it } from '@serenity-js/playwright-test'
import { Ensure, equals } from '@serenity-js/assertions';
import { Page } from '@serenity-js/web';
import {
    LandingTitle,
    NavigateToLanding,
    WaitForLandingTitle,
    GetApiConfig,
} from '../support';

export const NavigateToLandingPage = () => {
    describe('Landing page', () => {

        it('ensures the title is correct', async ({actor}) =>
            await actor.attemptsTo(
                NavigateToLanding(),
                Ensure.that(Page.current().title(), equals('abc'))));

        it('can get site config', async ({ actor }) =>
            actor.attemptsTo(
                GetApiConfig()));

        it('ensure the title text is correct', async ({ actor }) =>
            actor.attemptsTo(
                WaitForLandingTitle(),
                Ensure.that(LandingTitle(), equals('search'))));
    });
};

NavigateToLanding is a Task which navigate to landing

I don't want to run test in isolation mod

[waleedKhalidCalrom]

Hi @jan-molak any idea About the above Issue