Automated E2E and integration testing of Milo-based projects.

• step-1 : Fork the Nala repository
  • Begin by forking the Nala repository
• step-2 : Clone and Set Remote URLs
  • After forking, clone the repository to your local machine
  • Configure the remote URLs for both Upstream (original repository) and Origin (your fork).

- Open the Nala codebase in Visual Studio Code (VSCode).
- Execute the following sample command in the terminal to run the 'Quote' block tests

npx playwright test -g@quote

• If you encounter any errors, install the necessary dependencies as defined in the package.json, use the following commands:

 - npm install
 - npm fund 

• After installing the dependencies, re-run the above command to execute the Quote block test scripts. The tests should now run successfully.

Nala automation script creation involves following three simple steps.

• Step-1 : Create <block or feature name>.spec.js under the features folder and add test cases and data

  • Please refer below sample template for creating a test case.

module.exports = {
  FeatureName: 'Quote Block',
  features: [
    {
      tcid: '0',
      name: '@Quote ',
      path: '/drafts/nala/blocks/quote/quote',
      data: {
        quoteCopy: '3D is a crucial part of how we explore the brand in a digital workflow',
        figCaption: 'Benny Lee',
        cite: 'Global Manager of Experiential Design, Coca-Cola Company',
      },
      tags: '@smoke @regression @milo,',
    },
  ],
}

• Step-2 : Create <block or feature name>.page.js page object under the selectors folder and add locators

  • Please refer to the sample template for creating a selector page object

export default class Quote {
  constructor(page) {
    this.page = page;
    // quote block locators
    this.quote = this.page.locator('.quote');
    this.quoteImage = this.quote.locator('.quote-image');
    this.quoteCopy = this.quote.locator('p.quote-copy');
    this.quoteFigCaption = this.quote.locator('p.figcaption');
    this.quoteFigCaptionCite = this.quote.locator('cite p');
    this.sectionDark = this.page.locator('.section.dark');
  }
}

• Step-3 : Create <block or feature name>.test.js under the tests folder, and add tests

  • Please refer sample template for creating tests. Also please refer Nala onboarding wiki

// Quote block tests
test.describe('Milo Quote block test suite', () => {
  // before each test block
  test.beforeEach(async ({ page }) => {
    obj = new Quote(page);
    webutil = new WebUtil(page);
  });

  // Test - 0
  test(`${features[0].name},${features[0].tags}`, async ({ page, baseURL }) => {
    console.info(`${baseURL}${features[0].path}`);
    // test step-1
    await test.step('Go to Quote block test page', async () => {
      await page.goto(`${baseURL}${features[0].path}`);
      await page.waitForLoadState('domcontentloaded');
      await expect(page).toHaveURL(`${baseURL}${features[0].path}`);
    });

    // test step-2
    await test.step('Verify Quote block content / specs ', async () => {
      const { data } = features[0];
      
      await expect(page.locator('.quote')).toBeVisible();      

      await expect(await obj.quote).toBeVisible();
      await expect(await obj.quoteCopy).toContainText(data.quoteCopy);
      await expect(await obj.quoteFigCaption).toContainText(data.figCaption);

      // verify quote block css
      expect(await webutil.verifyCSS(
        await obj.quote,
        obj.cssProperties.quote,
      )).toBeTruthy();
    });
  });
});

• Nala offers a range of flexible options to suit your testing needs. Please refer to the following choices for running your tests:
• By default Nala is configured to runs all tests in parallel in headless mode on following browsers
  • Chrome
  • Firefox
  • WebKit

• Example-1 : I want to run all tests on all environments or projects on all browsers in headless mode

npx playwright test

• Example-2 : I want to run all tests on all environments or projects on all browsers in GUI mode

npx playwright test --headed

• Example-3 : I want to run all tests on specific environments or projects (i.e milo-live) on chrome browser in headless mode

npx playwright test --project=milo-live-chrome

• Note : To run tests in GUI mode , you append --headed to run commands

• Example-1 : I want to run Quote block test suite on all environment or projects on all browsers in headless mode

npx playwright test quote.block.test

• Example-2 : I want to run Quote block test suite on specific environment or projects (i.e milo-live) on firefox browsers in headless mode

npx playwright quote.block.test --project=milo-live-firefox

• headless mode

npx playwright test -g@milo

• Example-2: I want to run all smoke test suite on all environment or projects on all browsers in headless mode

npx playwright test -g@smoke

• Example-3: I want to run all regression test suite on all environment or projects on all browsers in headless mode

npx playwright test -g@regression

• Example-4: I want to run all quote block tests on all environment or projects on all browsers in headless mode

npx playwright test -g@quote

• Example-5: I want to run quote and marquee blocks tests on all environment or projects on all browsers in headless mode

npx playwright test -g@quote|@marquee

• Example-6: I want to run quote, marquee and accordion blocks tests on (i.e milo-live) envronment on chrome browser in headless mode

npx playwright test -g@quote|@marquee|@accordion --project=milo-live-chrome

• Note : To run tests using tags, make sure in .spec.js file @tags are specified

• To run Nala tests on your local host server, make sure you add or have following project object in playwright.config.js

    {
      name: 'local-chrome',
      use: {
        ...devices['Desktop Chrome'],
        baseURL: envs['@local3000'],
      },
    },

• Example-1 : I want to run all tests on my local server or on project name = local-chrome on chrome browser in headless mode

npx playwright test --project=local-chrome

• Example-2: I want to run all smoke test suite on my local server or on project name = local-chrome on chrome browser in headless mode

npx playwright test -g@smoke --project=local-chrome

• Note: Please refer above section-4, for various run options.

• Example-1 : This PR affects Quote block functionality so i want to test Quote block tests on Milo

  PR Label = @quote @run-nala 

• Example-2 : As part of this PR i want to verify all smoke tests on Milo

  PR Label = @smoke @run-nala

Example-3 : As part of this PR i want to verify all regression tests on Milo

  PR Label = @regression @run-nala

• Example-4 : As part of this PR i want to verify accordion and marquee block tests on Milo

  PR Label = @accordion @marquee @run-on-milo

Example-5 : As part of this PR i want to verify smokes tests on Milo and Bcom applications

  PR Label = @smoke @run-on-milo @run-on-bcom

• Note: PR should have label of the format : @tag(s) @run-on-<app name>

• Please refer <APP-Nala-Daily-Run.ymls for daily run workflows
• Tests are run on following platerforms
  • Linux OS ( ubuntu-latests) with browsers = [Chrome, Firefox, and WebKit]
  • Windows OS ( windows-latests) with browsers = [Chrome, Firefox, and WebKit]
  • Mac OS ( macos-latests) with browsers = [Chrome, Firefox, and WebKit]

• Please refer Nala onboarding wiki for more information