thunderstrike/puppeteer
thunderstrike/puppeteer
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(ng-schematics): add Protractor migration info (#10741)

Browse Source
This commit is contained in:
Nikolay Vitkov 2023-08-16 18:58:32 +02:00 committed by GitHub
parent 81ecb60190
commit 0a686fbf24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
docs/ng-schematics.md
View File

@ -111,3 +111,48 @@ The schematics utilize `@angular-devkit/schematics/testing` for verifying correc
```bash
npm run test
```
## Migrating from Protractor
### Browser
Puppeteer has its own [`browser`](https://pptr.dev/api/puppeteer.browser) that exposes different API compared to the one exposed by Protractor.
```ts
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
it('should work', () => {
const page = await browser.newPage();
// Query elements
const element = await page.$('my-component');
// Do actions
await element.click();
});
await browser.close();
})();
```
### 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](https://www.protractortest.org/#/api?view=ProtractorBy).
> For improved reliability and reduced flakiness try our
> **Experimental** [Locators API](https://pptr.dev/guides/locators)
| By | Protractor code | Puppeteer querySelector |
| ----------------- | ----------------------------------------------------------------- | ------------------------------------------------------------ |
| CSS | Single: `$(by.css('<CSS>'))` <br> Multiple: `$$(by.css('<CSS>'))` | Single: `page.$('<CSS>')` <br> Multiple: `page.$$('<CSS>')` |
| Id | `$(by.id('<ID>'))` | `page.$('#<ID>')` |
| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))` | `page.$('<CSS> ::-p-text(<TEXT>)')` ` |
| DeepCss | `$(by.deepCss('<CSS>'))` | `page.$(':scope >>> <CSS>')` |
| XPath | `$(by.xpath('<XPATH>'))` | `page.$('::-p-xpath(<XPATH>)')` |
| JS | `$(by.js('document.querySelector("<CSS>")'))` | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
> For advanced use cases such as Protractor's `by.addLocator` you can check Puppeteer's [Custom selectors](https://pptr.dev/guides/query-selectors#custom-selectors).

45
packages/ng-schematics/README.md
View File

@ -111,3 +111,48 @@ The schematics utilize `@angular-devkit/schematics/testing` for verifying correc
```bash
npm run test
```
## Migrating from Protractor
### Browser
Puppeteer has its own [`browser`](https://pptr.dev/api/puppeteer.browser) that exposes different API compared to the one exposed by Protractor.
```ts
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
it('should work', () => {
const page = await browser.newPage();
// Query elements
const element = await page.$('my-component');
// Do actions
await element.click();
});
await browser.close();
})();
```
### 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](https://www.protractortest.org/#/api?view=ProtractorBy).
> For improved reliability and reduced flakiness try our
> **Experimental** [Locators API](https://pptr.dev/guides/locators)
| By | Protractor code | Puppeteer querySelector |
| ----------------- | ----------------------------------------------------------------- | ------------------------------------------------------------ |
| CSS | Single: `$(by.css('<CSS>'))` <br> Multiple: `$$(by.css('<CSS>'))` | Single: `page.$('<CSS>')` <br> Multiple: `page.$$('<CSS>')` |
| Id | `$(by.id('<ID>'))` | `page.$('#<ID>')` |
| CssContainingText | `$(by.cssContainingText('<CSS>', '<TEXT>'))` | `page.$('<CSS> ::-p-text(<TEXT>)')` ` |
| DeepCss | `$(by.deepCss('<CSS>'))` | `page.$(':scope >>> <CSS>')` |
| XPath | `$(by.xpath('<XPATH>'))` | `page.$('::-p-xpath(<XPATH>)')` |
| JS | `$(by.js('document.querySelector("<CSS>")'))` | `page.evaluateHandle(() => document.querySelector('<CSS>'))` |
> For advanced use cases such as Protractor's `by.addLocator` you can check Puppeteer's [Custom selectors](https://pptr.dev/guides/query-selectors#custom-selectors).