Browser enum | PuppeteerBrowserPlatform enum | Puppeteer canDownload() function | Puppeteer CDP_WEBSOCKET_ENDPOINT_REGEX variable | Puppeteer ChromeReleaseChannel enum | Puppeteer CLI.(constructor) | Puppeteer CLI.run() method | Puppeteer CLI class | Puppeteer computeExecutablePath() function | Puppeteer computeSystemExecutablePath() function | Puppeteer createProfile() function | Puppeteer detectBrowserPlatform() function | Puppeteer getInstalledBrowsers() function | Puppeteer GetInstalledBrowsersOptions interface | Puppeteer install() function | Puppeteer install() function | Puppeteer InstalledBrowser class | Puppeteer InstallOptions interface | Puppeteer launch() function | Puppeteer LaunchOptions interface | Puppeteer makeProgressCallback() function | Puppeteer Options interface | Puppeteer Process.(constructor) | Puppeteer Process.close() method | Puppeteer Process.hasClosed() method | Puppeteer Process.kill() method | Puppeteer Process.waitForLineOutput() method | Puppeteer Process class | Puppeteer ProfileOptions interface | Puppeteer resolveBuildId() function | Puppeteer SystemOptions interface | Puppeteer TimeoutError class | Puppeteer uninstall() function | Puppeteer UninstallOptions interface | Puppeteer WEBDRIVER_BIDI_WEBSOCKET_ENDPOINT_REGEX variable | Puppeteer @puppeteer/browsers | Puppeteer Puppeteer Guides | Puppeteer Puppeteer Integrations | Puppeteer Chromium Support | Puppeteer Contributing | Puppeteer FAQ | Puppeteer Chrome Extensions | Puppeteer Configuration | Puppeteer Debugging | Puppeteer Docker | Puppeteer Evaluate JavaScript | Puppeteer Locators | Puppeteer Query Selectors (legacy) | Puppeteer Query Selectors | Puppeteer Request Interception | Puppeteer Puppeteer | Puppeteer Puppeteer Angular Schematic | Puppeteer Option Description Value Required --test-runnerThe testing framework to install along side Puppeteer. "jasmine", "jest", "mocha", "node"true
Creating a single test file
Puppeteer Angular Schematic exposes a method to create a single test file.
-ng generate @puppeteer/ng-schematics:test "<TestName>" ng generate @puppeteer/ng-schematics:e2e "<TestName>" Running test server and dev server at the same time
By default the E2E test will run the app on the same port as ng start.
To avoid this you can specify the port the an the angular.json
@@ -43,22 +43,20 @@ Update either e2e or puppeteer (depending on the initi
const baseUrl = 'http://localhost:8080' ; Contributing
Check out our contributing guide to get an overview of what you need to develop in the Puppeteer repo.
-Sandbox
-For easier development we provide a script to auto-generate the Angular project to test against. Simply run:
-npm run sandbox -- --init After that to run @puppeteer/ng-schematics against the Sandbox Angular project run:
-npm run sandbox npm run sandbox -- --build To run the creating of single test schematic:
-
-To create a multi project workspace use the following command
-npm run sandbox -- --init --multi Sandbox smoke tests
+To make integration easier smoke test can be run with a single command, that will create a fresh install of Angular (single application and a milti application projects). Then it will install the schematics inside them and run the initial e2e tests:
+
Unit Testing
The schematics utilize @angular-devkit/schematics/testing for verifying correct file creation and package.json updates. To execute the test suit:
Migrating from Protractor
-Browser
-Puppeteer has its own browser
-import puppeteer from 'puppeteer' ; ( async ( ) => { const browser = await puppeteer . launch ( ) ; it ( 'should work' , ( ) => { const page = await browser . newPage ( ) ; const element = await page . $ ( 'my-component' ) ; await element . click ( ) ; } ) ; await browser . close ( ) ; } ) ( ) ; Entry point
+Puppeteer has its own browserbrowser would be Puppeteer's page
+import { setupBrowserHooks , getBrowserState } from './utils' ; describe ( '<Test Name>' , function ( ) { setupBrowserHooks ( ) ; it ( 'is running' , async function ( ) { const { page } = getBrowserState ( ) ; await page . locator ( 'my-component' ) . click ( ) ; } ) ; } ) ; Getting element properties
+You can easily get any property of the element.
+import { setupBrowserHooks , getBrowserState } from './utils' ; describe ( '<Test Name>' , function ( ) { setupBrowserHooks ( ) ; it ( 'is running' , async function ( ) { const { page } = getBrowserState ( ) ; const elementText = await page . locator ( '.my-component' ) . map ( button => button . innerText ) . wait ( ) ; } ) ; } ) ; Query Selectors
Puppeteer supports multiple types of selectors, namely, the CSS, ARIA, text, XPath and pierce selectors.
The following table shows Puppeteer's equivalents to Protractor By .
@@ -69,6 +67,14 @@ The following table shows Puppeteer's equivalents to Custom selectors .
-
+
+Actions Selectors
+Puppeteer allows you to all necessary actions to allow test your application.
+element ( locator ) . click ( ) ; await page . locator ( locator ) . click ( ) ; element ( locator ) . sendKeys ( 'my text' ) ; await page . locator ( locator ) . fill ( 'my text' ) ; element ( locator ) . clear ( ) ; await page . locator ( locator ) . fill ( '' ) ; element ( locator ) . getAttribute ( 'value' ) ; const element = await page . locator ( locator ) . waitHandle ( ) ; const value = await element . getProperty ( 'value' ) ; Example
+Sample Protractor test:
+describe ( 'Protractor Demo' , function ( ) { it ( 'should add one and two' , function ( ) { browser . get ( 'http://juliemr.github.io/protractor-demo/' ) ; element ( by . model ( 'first' ) ) . sendKeys ( 1 ) ; element ( by . model ( 'second' ) ) . sendKeys ( 2 ) ; element ( by . id ( 'gobutton' ) ) . click ( ) ; expect ( element ( by . binding ( 'latest' ) ) . getText ( ) ) . toEqual ( '3' ) ; } ) ; } ) ; Sample Puppeteer migration:
+import { setupBrowserHooks , getBrowserState } from './utils' ; describe ( 'Puppeteer Demo' , function ( ) { setupBrowserHooks ( ) ; it ( 'should add one and two' , function ( ) { const { page } = getBrowserState ( ) ; await page . goto ( 'http://juliemr.github.io/protractor-demo/' ) ; await page . locator ( '.form-inline > input:nth-child(1)' ) . fill ( '1' ) ; await page . locator ( '.form-inline > input:nth-child(2)' ) . fill ( '2' ) ; await page . locator ( '#gobutton' ) . fill ( '2' ) ; const result = await page . locator ( '.table tbody td:last-of-type' ) . map ( header => header . innerText ) . wait ( ) ; expect ( result ) . toEqual ( '3' ) ; } ) ; } ) ;