Nala

NALA Introduction

Automated E2E UI testing of Milo-based projects.

• End-to-End UI Automation Framework for Milo and Milo-based Projects
• Built around the Microsoft Playwright tool
• Easy to create UI automation test scripts by anyone
• Provides flexibility to run and debug tests in the developer environments (local, libs, and feature branches).
• Offers the capability to run tests on various platforms and browser combinations (Windows, Linux, MacOS, & Chrome, Firefox, Web Kit, etc.).
• Supports running UI tests on PR branches via GitHub Actions, Circle Ci, and Jenkins for PR approvals

Nala Directory Structure

NALA folder contains all UI tests

• Block folder: Contains tests for all Milo blocks.

• Feature folder: Contains tests for all Milo features.

• Libs folder: Contains web and other test/validation libraries

• Util folder: Contain utility methods like a reporter, slack integrations, etc.

  

Nala Test Structure

NALA test contains 3 main files

• .page.js:

  • Contains page object class  block and features
  • Contains locators for all web elements

• .spec.js:

  • Contains test cases or spec
  • Includes test pages and test data

• .test.js:

  • Validates the test cases/specs
  • Runs on different platforms or browsers ( UI, Debug and Headless mode)

  

Nala Tests

• .page.js (page object):

  

• .spec.js (test case/feature spec):

  

• .test.js (test script):

  

Nala test creation

NALA Test creation is Quick and Easy:

• Test Scripts: For the first time, create the following files, and then update or add specs and tests/test steps

  • .page.js for page selectors/ locator
  • .spec.js for adding test cases/specs
  • .test.js for validating test case/specs

• Code Snippets: Use below code snippets commands to create required page objects, specs, and tests

  • create nala page
  • create nala spec
  • add nala spec
  • create nala test
  • add nala test

• Test Pages:

  • Test pages needs to created under draft>>nala folder in share point.

Nala test run

NALA tests can be run in the following modes on multiple browsers (Chrome, Firefox, Web Kit, etc.), platforms (Linux, Windows, macOS, etc.), and application environments ( local, libs, stage, main, feature-branch, etc.).

• Headless mode

• UI Mode

• Debug mode

• Running Tests

  • Run/debug tests on localhost (https://localhost:3000/)
  • Run/debug tests on libs (https://localhost:6456)
  • Run/debug tests on feature branch ( https://feature-branch--milo--adobecom/)
  • Run/debug test with ?milolibs=<>
  • Run tests on the PR branch ( GitHub Actions)
  • Run tests on stage, main branches ( GitHub Actions)
  • Run test on milolibs ( GitHub Actions)
  • Run test on Circle Ci ( inside adobe n/w)

Nala Run command

• npm run nala <env> [options]
  • Env: [local | libs | stage | etc. ] default: local
  • Options:
    • browser=<chrome|firefox|webkit> Browser to use (default: chrome)
    • device=<desktop|mobile> Device (default: desktop)
    • test=<.test.js> Specific test file to run (runs all tests in the file)
    • -g, --g=<@tag> Tag to filter tests by annotations ex: @test1 @accordion @marquee
    • mode=<headless|ui|debug|headed> _Mode (default: headless) _
    • config= Configuration file (default: Playwright default)
    • project= _Project configuration (default: milo-live-chromium)
    • milolibs=<local|prod|feature|any|> _Milolibs?=

.