{"id":20723962,"url":"https://github.com/nascentdigital/wdio-extend","last_synced_at":"2026-04-15T19:41:05.997Z","repository":{"id":37885581,"uuid":"225757463","full_name":"nascentdigital/wdio-extend","owner":"nascentdigital","description":"A set of Webdriver.io Chai extensions for building reliable E2E UI tests.","archived":false,"fork":false,"pushed_at":"2023-01-07T12:27:07.000Z","size":1229,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-02-24T21:09:39.144Z","etag":null,"topics":["chai","e2e","javascript","mocha","testing","ui","webdriverio"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nascentdigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-04T02:04:41.000Z","updated_at":"2020-07-21T01:44:05.000Z","dependencies_parsed_at":"2023-02-07T04:01:36.362Z","dependency_job_id":null,"html_url":"https://github.com/nascentdigital/wdio-extend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nascentdigital%2Fwdio-extend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nascentdigital%2Fwdio-extend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nascentdigital%2Fwdio-extend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nascentdigital%2Fwdio-extend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nascentdigital","download_url":"https://codeload.github.com/nascentdigital/wdio-extend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242998563,"owners_count":20219376,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chai","e2e","javascript","mocha","testing","ui","webdriverio"],"created_at":"2024-11-17T04:11:05.235Z","updated_at":"2025-12-06T19:02:03.446Z","avatar_url":"https://github.com/nascentdigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wdio-extend\n\u003e A set of [WebdriverIO](https://webdriver.io/) extensions to help build E2E tests that validate your user interface\n\u003e using a combination of Chai extensions and a Page Object modeling language.\n\n[![NPM version](https://img.shields.io/npm/v/@nascentdigital/wdio-extend.svg)](https://www.npmjs.com/package/@nascentdigital/wdio-extend)\n[![downloads](https://img.shields.io/npm/dm/@nascentdigital/wdio-extend.svg)](http://npm-stat.com/charts.html?package=@nascentdigital/wdio-extend\u0026from=2018-01-01)\n[![Node version](https://img.shields.io/node/v/@nascentdigital/wdio-extend.svg)](http://nodejs.org/download/)\n[![Build Status](https://travis-ci.com/nascentdigital/wdio-extend.svg?branch=master)](https://travis-ci.com/nascentdigital/wdio-extend.svg?branch=master)\n[![Code Coverage](https://img.shields.io/codecov/c/github/nascentdigital/wdio-extend.svg)](https://codecov.io/github/nascentdigital/wdio-extend)\n[![Known Vulnerabilities](https://snyk.io/test/github/nascentdigital/wdio-extend/badge.svg)](https://snyk.io/test/github/nascentdigital/wdio-extend)\n\n\n## Installation\n\nThis package should be used with `node \u003e= 10`.  We highly recommend using\n[Node Version Manager](https://github.com/nvm-sh/nvm) if you need to update your node version.\n\n\n### Quick Start\n\nThe quickest way to get started is through our command-line interface,\n[`create-e2e-tests`](https://github.com/nascentdigital/create-e2e-tests) to generates a sample\nproject after prompting for project options:\n\n```bash\n\u003e npx @nascentdigital/create-e2e-tests my-e2e-project\n```\n\nVerify the project is installed correctly by running the sample E2E tests against the\n[nascentdigital.com](https://nascentdigital.com) website (requires [Google Chrome](https://www.google.com/chrome/) to be\ninstalled):\n\n```bash\n\u003e cd my-e2e-project \u0026\u0026 npm run test\n```\n\nView the report to see the build results *(hopefully showing a successful build)*.\n\n\n### Manual Installation\n\nYou can add the library directly to an existing [WebdriverIO](https://webdriver.io) project by directly installing the\npackage to  your project:\n\n```bash\nnpm i -s @nascentdigital/wdio-extend\n```\n\nAnd registering the extension library as a `before` hook in your WebdriverIO config file:\n\n```javascript\n// wdio.conf.js\nbefore: function() {\n    require(\"ts-node\").register({files: true});\n    require(\"@nascentdigital/wdio-extend\").NascentExtensions.register();\n}\n```\n\n\n### Defining Comnponents and Pages\n\n`Component` and `Page` objects are key concepts of the `wdio-extend` framework.  They provide a simple way to implement\nthe [Page Object Model](https://martinfowler.com/bliki/PageObject.html) design pattern within WebdriverIO.\n\n#### Components\n\nA `Component` is the most basic building block of a test.  It encapsulates the specification and expected behavior of\na widget on a web page, allowing it to be testing independently in a reusable way.\n\nComponents provide a way to define the expected **structure**, **layout**, and **styling** of a component in a\nresponsive manner.\n\nThe definition for a Card component might look something like this:\n\n```typescript\n/// Card.ts\n\nclass Card extends Component {\n\n    constructor(parent: Container) {\n        // CSS selector demarcating the component root\n        super(parent, `*[data-component=\"Card\"]`);\n    }\n\n\n    public get title() {\n        return Component.create(this, `.title`, \"title\")\n            .withStyle(HeadlineStyle);\n    }\n\n    public get caption() {\n        return Component.create(this, `.caption`, \"caption\")\n            .withStyle(BodyStyle);\n    }\n\n    public get image() {\n        return new Component(this, `img`, \"image\");\n    }\n\n    protected declareLayout(): Layout | null {\n        return Layout\n            .xs()\n                .layout(this.title).above(this.caption)\n                .layout(this.caption).above(this.image)\n            .md()\n                .layout(this.title).leftOf(this.caption)\n                .layout(this.caption).leftOf(this.image)\n            .done();\n    }\n}\n```\n\n### Pages\n\nA `Page` is a top-level object that has similar functionality to a `Component` but exists as a singleton which maps to a\nspecific web page within a website.  A `Page` will be composed of `Component` objects.\n\nHere is an example of a typical homepage:\n\n```typescript\n// HomePage.ts\nclass HomePage extends Page {\n\n    public constructor() {\n        super(\"/\");\n    }\n\n    public get header() {\n        return new Header(this);\n    }\n\n    public get card() {\n        return new Card(this);\n    }\n\n    public get footer() {\n        return new Footer(this);\n    }\n}\n\n\n// exports\nexport const homePage = new HomePage();\n\n```\n\n\n\n## License\n\nMIT © [Nascent Digital](https://github.com/nascentdigital)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnascentdigital%2Fwdio-extend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnascentdigital%2Fwdio-extend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnascentdigital%2Fwdio-extend/lists"}