Onboarding

The primary objective of the Nala project is to offer a user-friendly solution that developers can easily comprehend with minimal complexity. Accordingly, the project is designed with a limited number of dependencies, streamlined file configuration, and straightforward test setup

Nala Folder Structure

\nala
  ┣━ \github/workflows
  ┣━ \configs
  ┣━ \docs
  ┣━ \envs 
  ┣━ \features
  ┣━ \selectors
  ┣━ \tests
  ┣━ \utils
  ┣━ global.setup.js
  ┣━ playwright.config.js
  ┣━ run.sh
  ┣━ dailyrun.sh

Onboarding a project on Nala is very simple and straightforward

1. Nala repository

• step-1: Fork the Nala repository
• step-2: After forking, clone the repository to your local machine and configure the remote URLs for both Upstream and Origin

2. Perform a Dry Run Test

• 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.

3. Create your project folders

\nala_root
┣━ \features
│   ┗━ \your_project_name
┣━ \selectors
│   ┗━ \your_project_name
┗━ \tests
    ┗━ \your_project_name

4. Create Config.js

• Copy playwright.config.js to <your-project-name>.config.js in the configs folder.
• Update project URLs in the env.js file.
• Define project objects in your config.js file:

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

5. Start Nala Automation Test Script Creation

Nala automation script creation involves following three simple steps.

• Step-1: Create .spec.js under features with test cases and data.

module.exports = {
  name: 'Marquee',
  features: [
    {
      tcid: 'testcaseid'
      name: '@marquee',
      path: '/test/features/blocks/marquee',
      tags: '@marquee-large @large-button @smoke @regression',
    },
  ],
};

Step-2 : Create .page.js under selectors for page object classes containing locators.

• Page Object Model (POM) and Locators are the central pieces of the framework. Locators represent a way to find element(s) on the page at any moment. Playwright uses various Locators to find elements on a page.

• Refer to the sample template for guidance.

• 

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

• This is where all the testing logic for the given test case(s) is added. The test file is where you pull in the selector file(s), POM, and feature spec file. From the feature spec file, test details like name, id, tags, test page(s) path, and test data are read.

• A test file can have a grouping of test cases or be a single test. Locator methods are used to find elements on the page that are needed for the test case by using the selectors from the selector file(s), and assertions/expectations are then made for the different use cases using the "expect" library.

• Nala tests focus on Milo-based blocks rather than entire pages, unlike many Selenium-based frameworks.

• All tests are written in JavaScript.

Here is an example Nala test file:

// Marquee blocks tests
test.describe('Milo Marquee block test suite', () => {
  // before each test block
  test.beforeEach(async ({ page }) => {
    webUtil = new WebUtil(page);
    marquee = new Marquee(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 Marquee (light) 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 Marquee (light) specs ', async () => {
      // verify marquee(light) and its content are visibility
      expect(await marquee.verifyMarquee('marquee (light)')).toBeTruthy();
    });
  });