Selenium JavaScript Component Driven Pattern

The Legend Page Object Pattern:

The Page Object Model is a well-known design pattern in test automation that is extensively used in the industry. In this approach, each web page of the Application Under Test (AUT) is represented by a class. These classes contain the elements of the web page as well as the methods that enable interactions with those elements. By creating instances of these classes, tests can execute operations on the web pages by calling the appropriate methods for those actions.

Here’s an example of Selenium JavaScript on how to implement Page objects.

What is a component-driven pattern?

Component-driven development has become one of the go-to strategies worldwide to scale and streamline front-end development.

Here are some good reads that emphasize the component-driven approach:

• Component-based software engineering

• Component-driven development: Best practices to build scalable frontend.

• What are some advantages of Component Driven Development?

• Web Components and their advantages

Many automation libraries provide a single class for interacting with various web page elements, without distinguishing between buttons, text boxes, links, tables, and other components.

• project-name: Root directory containing all the project files.

• .github: GitHub-specific directory, typically used for continuous integration (CI) and workflow files.

  • workflows: Holds configuration files for GitHub Actions automation.

    • chrome-build.yml: GitHub Actions workflow file to build and test the project using Chrome.

• test-data: Folder containing data files for test execution.

  • test-data1.csv: CSV file with test data set 1.

  • test-data2.csv: CSV file with test data set 2.

• tests: Main directory containing the test-related code.

  • base_UI: Core UI components and utility classes used in the project.

    • Components: Folder containing reusable UI components, encapsulating specific web elements.

      • Button.js: JavaScript class for interacting with button elements on the web pages.

      • CheckBox.js: JavaScript class for interacting with checkbox elements.

      • DropDown.js: JavaScript class for interacting with dropdown menus.

      • WebComponent.js: Base class for web components, providing general utilities for interacting with various web elements.

    • Browser.js: Class handling browser-specific interactions and actions.

    • BrowserFactory.js: Factory class responsible for browser setup and configurations.

    • ConfigFactory.js: Class managing configuration properties for the project (e.g., environment settings).

    • SelectorType.js: Enum or configuration file defining different types of selectors (like CSS, XPath).

  • pages: Folder following the Page Object Model (POM) pattern, containing page-related classes.

    • AllPages.js: Centralized class providing access to all page objects.

    • BasePages.js: Base class for all web pages, including common methods and properties.

    • LoginPages.js: Page class representing the login page and its interactions.

    • HomePages.js: Page class representing the home page and its interactions.

  • specs: Directory holding the actual test scripts/specifications.

    • testfile.spec.js: Test file containing specific test cases.

    • testfile1.spec.js: Another test file for a different set of test cases.

• .gitignore: File specifying which files and directories should be ignored by Git version control.

• package-lock.json: Auto-generated file that locks down the versions of dependencies for consistent builds.

• package.json: Project configuration file listing dependencies, scripts, and metadata for Node.js.

• README.md: Documentation file providing an overview of the project and instructions for setup and usage.

• testconfig.json: JSON file used to store configuration settings related to test execution.