Test everything you can test with better-protractor which relies on Protractor, the awesome end-to-end-testing framework made by the Angular team. However, Protractor (and therefore better-protractor) can be used on any kind of web page, Angular is not required!
better-protractor will help you to write better end-to-end tests by providing a simple API on top of Protractor. Optimized for usage with Typescript, but tests written in Javascript work as well.
- Navigate to any web page (with relative path support for Angular)
- Click any element (query by ID, CSS, Xpath, HTML tag)
- Scroll to a specific element
- Get browser cookies, localStorage and sessionStorage
- Press mouse buttons and keyboard keys
- Hover element
- Fill and clear input fields
- Get DOM properties and style attributes of elements
- Responsiveness: Adjust your window to simulate any device (tablet, smartphone, laptop)
- Check if elements exist / are visible
- Submit forms
- Take screenshots of web pages
- Get the number of elements on a web page by CSS query
- Get the size of any element
- Display mouse pointer
- Access the underlying Protractor API
- And many more useful methods at your disposal
Read this article if you want to learn more about end-to-end testing in general.
I also wrote an article about software quality assurance and testing in general.
- If you do not have Protractor and Webdriver setup yet, then please do so: Protractor setup. better-protractor relies on Protractor in order to work.
- Install better-protractor with NPM:
npm install better-protractor
ornpm install better-protractor --only=dev
- Recommended (TypeScript): Create a custom class which extends BetterProtractorService. You can override the default methods and add your own custom variables and methods.
const service: CustomTestService = new CustomTestService();
- You can also directly use better-protractor in TypeScript if the provided methods suit your needs or if you do not want to let your custom page object class inherit.
const service: BetterProtractorService = new BetterProtractorService();
- You can also use better-protractor in Javascript.
const e2e = require("better-protractor");
const service = new e2e.BetterProtractorService();
- For writing the actual tests, you can use Jasmine. However, better-protractor does not rely on a particular testing framework so you are free to use any Javascript testing framework (e.g. Mocha, Jest, QUnit).
- Tested with Angular, TypeScript > 2 and latest Protractor (5.3).
- better-protractor works on any Angular page. For other pages (e.g. running Vue.js / React / static web page), simply use
disableAngular()
which will make your tests run on every web page.
See the e2e folder for code examples in Javascript and TypeScript.
- Download the repository.
- Get Node.js and install it if you haven't already.
- Use
npm install
to install the necessary dependencies. - Run
webdriver-manager update
(once or when you updated your browser). - Run
webdriver-manager start
to launch Webdriver(Selenium) - Run
protractor
orprotractor-once
to run the sample end-to-end tests in the e2e-folder (written in Javascript and TypeScript). - Run
npm test
to run the unit & e2e tests.
Pull requests and feature requests are welcome!