2023-08-23 12:45:53 +00:00
<!doctype html>
2023-11-29 13:34:30 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-integrations/ng-schematics" data-has-hydrated = "false" >
2023-08-23 12:45:53 +00:00
< head >
< meta charset = "UTF-8" >
2024-01-05 08:33:29 +00:00
< meta name = "generator" content = "Docusaurus v3.0.1" >
2023-11-29 13:34:30 +00:00
< title data-rh = "true" > Puppeteer Angular Schematic | Puppeteer< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:url" content = "https://pptr.dev/next/integrations/ng-schematics" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docsearch:counter" content = "3" > < meta data-rh = "true" property = "og:title" content = "Puppeteer Angular Schematic | Puppeteer" > < meta data-rh = "true" name = "description" content = "Adds Puppeteer-based e2e tests to your Angular project." > < meta data-rh = "true" property = "og:description" content = "Adds Puppeteer-based e2e tests to your Angular project." > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://pptr.dev/next/integrations/ng-schematics" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/next/integrations/ng-schematics" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://pptr.dev/next/integrations/ng-schematics" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://DVKY664LG7-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "search" type = "application/opensearchdescription+xml" title = "Puppeteer" href = "/opensearch.xml" >
2023-08-23 12:45:53 +00:00
2024-01-05 08:33:29 +00:00
< script src = "/fix-location.js" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.10908b84.css" >
2024-01-24 13:57:56 +00:00
< script src = "/assets/js/runtime~main.413dad99.js" defer = "defer" > < / script >
< script src = "/assets/js/main.b0866abb.js" defer = "defer" > < / script >
2023-08-23 12:45:53 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2024-01-24 13:57:56 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; t ( null !== e ? e : "light" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_fXgn" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedComponent_mlkZ themedComponent--light_NVdE" > < img src = "https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt = "Puppeteer Logo" class = "themedComponent_mlkZ themedComponent--dark_xIcU" > < / div > < b class = "navbar__title text--truncate" > Puppeteer< / b > < / a > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/next/" > Docs< / a > < a class = "navbar__item navbar__link" href = "/next/api/puppeteer.puppeteernode" > Puppeteer API< / a > < a class = "navbar__item navbar__link" href = "/next/browsers-api/" > @puppeteer/browsers API< / a > < / div > < div class = "navbar__items navbar__items--right" > < div class = "navbar__item dropdown dropdown--hoverable dropdown--right" > < a class = "navbar__link" aria-haspopup = "true" aria-expanded = "false" role = "button" href = "/next/" > Next< / a > < ul class = "dropdown__menu" > < li > < a aria-current = "page" class = "dropdown__link dropdown__link--active" href = "/next/integrations/ng-schematics" > Next< / a > < / li > < li > < a class = "dropdown__link" href = "/integrations/ng-schematics" > 21.9.0< / a > < / li > < li > < hr class = "dropdown-separator" > < / li > < li class = "dropdown-archived-versions" > < b > Archived versions< / b > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.8.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 21.8.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.7.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 21.7.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.6.1/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 21.6.1< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li > < a href = "https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.6.0/docs/api/index.md" target = "_blank" rel = "noopener noreferrer" class = "dropdown__link" > 21.6.0< svg width = "12" height = "12" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPIU" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h1
2023-11-29 13:34:30 +00:00
< p > Adds Puppeteer-based e2e tests to your Angular project.< / p >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "getting-started" > Getting started< a href = "#getting-started" class = "hash-link" aria-label = "Direct link to Getting started" title = "Direct link to Getting started" > < / a > < / h2 >
< p > Run the command below in an Angular CLI app directory and follow the prompts.< / p >
< blockquote >
< p > Note this will add the schematic as a dependency to your project.< / p >
< / blockquote >
< div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > ng < / span > < span class = "token function" style = "color:#d73a49" > add< / span > < span class = "token plain" > @puppeteer/ng-schematics< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > Or you can use the same command followed by the < a href = "#options" > options< / a > below.< / p >
< p > Currently, this schematic supports the following test runners:< / p >
< ul >
< li > < a href = "https://jasmine.github.io/" target = "_blank" rel = "noopener noreferrer" > < strong > Jasmine< / strong > < / a > < / li >
< li > < a href = "https://jestjs.io/" target = "_blank" rel = "noopener noreferrer" > < strong > Jest< / strong > < / a > < / li >
< li > < a href = "https://mochajs.org/" target = "_blank" rel = "noopener noreferrer" > < strong > Mocha< / strong > < / a > < / li >
< li > < a href = "https://nodejs.org/api/test.html" target = "_blank" rel = "noopener noreferrer" > < strong > Node Test Runner< / strong > < / a > < / li >
< / ul >
< p > With the schematics installed you can run E2E tests:< / p >
< div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > ng e2e< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "options" > Options< a href = "#options" class = "hash-link" aria-label = "Direct link to Options" title = "Direct link to Options" > < / a > < / h3 >
< p > When adding schematics to your project you can to provide following options:< / p >
2023-12-05 13:01:52 +00:00
< table > < thead > < tr > < th > Option< / th > < th > Description< / th > < th > Value< / th > < th > Required< / th > < / tr > < / thead > < tbody > < tr > < td > < code > --test-runner< / code > < / td > < td > The testing framework to install along side Puppeteer.< / td > < td > < code > " jasmine" < / code > , < code > " jest" < / code > , < code > " mocha" < / code > , < code > " node" < / code > < / td > < td > < code > true< / code > < / td > < / tr > < / tbody > < / table >
2023-11-29 13:34:30 +00:00
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "creating-a-single-test-file" > Creating a single test file< a href = "#creating-a-single-test-file" class = "hash-link" aria-label = "Direct link to Creating a single test file" title = "Direct link to Creating a single test file" > < / a > < / h2 >
< p > Puppeteer Angular Schematic exposes a method to create a single test file.< / p >
2023-12-13 12:37:04 +00:00
< div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > ng generate @puppeteer/ng-schematics:e2e < / span > < span class = "token string" style = "color:#e3116c" > " < TestName> " < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
2023-11-29 13:34:30 +00:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "running-test-server-and-dev-server-at-the-same-time" > Running test server and dev server at the same time< a href = "#running-test-server-and-dev-server-at-the-same-time" class = "hash-link" aria-label = "Direct link to Running test server and dev server at the same time" title = "Direct link to Running test server and dev server at the same time" > < / a > < / h3 >
< p > By default the E2E test will run the app on the same port as < code > ng start< / code > .
2023-08-23 12:45:53 +00:00
To avoid this you can specify the port the an the < code > angular.json< / code >
2023-11-29 13:34:30 +00:00
Update either < code > e2e< / code > or < code > puppeteer< / code > (depending on the initial setup) to:< / p >
< div class = "language-json codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-json codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " e2e" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " builder" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > " @puppeteer/ng-schematics:puppeteer" < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " options" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " commands" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > [< / span > < span class = "token plain" > ...< / span > < span class = "token punctuation" style = "color:#393A34" > ]< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " devServerTarget" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > " sandbox:serve" < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " testRunner" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > " < TestRunner> " < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token property" style = "color:#36acaa" > " port" < / span > < span class = "token operator" style = "color:#393A34" > :< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:#36acaa" > 8080< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > ...< / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButt
< p > Now update the E2E test file < code > utils.ts< / code > baseUrl to:< / p >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > baseUrl < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' http://localhost:8080' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "contributing" > Contributing< a href = "#contributing" class = "hash-link" aria-label = "Direct link to Contributing" title = "Direct link to Contributing" > < / a > < / h2 >
< p > Check out our < a href = "https://pptr.dev/contributing" target = "_blank" rel = "noopener noreferrer" > contributing guide< / a > to get an overview of what you need to develop in the Puppeteer repo.< / p >
2023-12-13 12:37:04 +00:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "sandbox-smoke-tests" > Sandbox smoke tests< a href = "#sandbox-smoke-tests" class = "hash-link" aria-label = "Direct link to Sandbox smoke tests" title = "Direct link to Sandbox smoke tests" > < / a > < / h3 >
< p > 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:< / p >
< div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token function" style = "color:#d73a49" > node< / span > < span class = "token plain" > tools/smoke.mjs< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
2023-11-29 13:34:30 +00:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "unit-testing" > Unit Testing< a href = "#unit-testing" class = "hash-link" aria-label = "Direct link to Unit Testing" title = "Direct link to Unit Testing" > < / a > < / h3 >
< p > The schematics utilize < code > @angular-devkit/schematics/testing< / code > for verifying correct file creation and < code > package.json< / code > updates. To execute the test suit:< / p >
< div class = "language-bash codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-bash codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token function" style = "color:#d73a49" > npm< / span > < span class = "token plain" > run < / span > < span class = "token builtin class-name" > test< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup__atx" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_eSgA" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_y97N" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_LjdS" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = "migrating-from-protractor" > Migrating from Protractor< a href = "#migrating-from-protractor" class = "hash-link" aria-label = "Direct link to Migrating from Protractor" title = "Direct link to Migrating from Protractor" > < / a > < / h2 >
2023-12-13 12:37:04 +00:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "entry-point" > Entry point< a href = "#entry-point" class = "hash-link" aria-label = "Direct link to Entry point" title = "Direct link to Entry point" > < / a > < / h3 >
< p > Puppeteer has its own < a href = "https://pptr.dev/api/puppeteer.browser" target = "_blank" rel = "noopener noreferrer" > < code > browser< / code > < / a > that exposes the browser process.
A more closes comparison for Protractor' s < code > browser< / code > would be Puppeteer' s < a href = "https://pptr.dev/api/puppeteer.page" target = "_blank" rel = "noopener noreferrer" > < code > page< / code > < / a > .< / p >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token comment" style = "color:#999988;font-style:italic" > // Testing framework specific imports< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > getBrowserState< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ./utils' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > describe< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' < Test Name> ' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > it< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' is running' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > getBrowserState< / span > < span class = "token punctuation" style = "
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "getting-element-properties" > Getting element properties< a href = "#getting-element-properties" class = "hash-link" aria-label = "Direct link to Getting element properties" title = "Direct link to Getting element properties" > < / a > < / h3 >
< p > You can easily get any property of the element.< / p >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token comment" style = "color:#999988;font-style:italic" > // Testing framework specific imports< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > getBrowserState< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ./utils' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > describe< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' < Test Name> ' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > it< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' is running' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > getBrowserState< / span > < span class = "token punctuation" style = "
2023-11-29 13:34:30 +00:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "query-selectors" > Query Selectors< a href = "#query-selectors" class = "hash-link" aria-label = "Direct link to Query Selectors" title = "Direct link to Query Selectors" > < / a > < / h3 >
< p > Puppeteer supports multiple types of selectors, namely, the CSS, ARIA, text, XPath and pierce selectors.
The following table shows Puppeteer' s equivalents to < a href = "https://www.protractortest.org/#/api?view=ProtractorBy" target = "_blank" rel = "noopener noreferrer" > Protractor By< / a > .< / p >
< blockquote >
< p > For improved reliability and reduced flakiness try our
< strong > Experimental< / strong > < a href = "https://pptr.dev/guides/locators" target = "_blank" rel = "noopener noreferrer" > Locators API< / a > < / p >
< / blockquote >
< table > < thead > < tr > < th > By< / th > < th > Protractor code< / th > < th > Puppeteer querySelector< / th > < / tr > < / thead > < tbody > < tr > < td > CSS (Single)< / td > < td > < code > $(by.css(' < CSS> ' ))< / code > < / td > < td > < code > page.$(' < CSS> ' )< / code > < / td > < / tr > < tr > < td > CSS (Multiple)< / td > < td > < code > $$(by.css(' < CSS> ' ))< / code > < / td > < td > < code > page.$$(' < CSS> ' )< / code > < / td > < / tr > < tr > < td > Id< / td > < td > < code > $(by.id(' < ID> ' ))< / code > < / td > < td > < code > page.$(' #< ID> ' )< / code > < / td > < / tr > < tr > < td > CssContainingText< / td > < td > < code > $(by.cssContainingText(' < CSS> ' , ' < TEXT> ' ))< / code > < / td > < td > < code > page.$(' < CSS> ::-p-text(< TEXT> )' )< / code > `< / td > < / tr > < tr > < td > DeepCss< / td > < td > < code > $(by.deepCss(' < CSS> ' ))< / code > < / td > < td > < code > page.$(' :scope > > > < CSS> ' )< / code > < / td > < / tr > < tr > < td > XPath< / td > < td > < code > $(by.xpath(' < XPATH> ' ))< / code > < / td > < td > < code > page.$(' ::-p-xpath(< XPATH> )' )< / code > < / td > < / tr > < tr > < td > JS< / td > < td > < code > $(by.js(' document.querySelector(" < CSS> " )' ))< / code > < / td > < td > < code > page.evaluateHandle(() => document.querySelector(' < CSS> ' ))< / code > < / td > < / tr > < / tbody > < / table >
< blockquote >
< p > For advanced use cases such as Protractor' s < code > by.addLocator< / code > you can check Puppeteer' s < a href = "https://pptr.dev/guides/query-selectors#custom-selectors" target = "_blank" rel = "noopener noreferrer" > Custom selectors< / a > .< / p >
2023-12-13 12:37:04 +00:00
< / blockquote >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "actions-selectors" > Actions Selectors< a href = "#actions-selectors" class = "hash-link" aria-label = "Direct link to Actions Selectors" title = "Direct link to Actions Selectors" > < / a > < / h3 >
< p > Puppeteer allows you to all necessary actions to allow test your application.< / p >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token comment" style = "color:#999988;font-style:italic" > // Click on the element.< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > element< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > click< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // Puppeteer equivalent< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > click< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // Send keys to the element (usually an input).< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > element< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > sendKeys< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' my text' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:#999988;font-style:italic" > // Puppeteer equivalent< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > locator< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = "example" > Example< a href = "#example" class = "hash-link" aria-label = "Direct link to Example" title = "Direct link to Example" > < / a > < / h3 >
< p > Sample Protractor test:< / p >
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token function" style = "color:#d73a49" > describe< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' Protractor Demo' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > it< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' should add one and two' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > browser< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > get< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' http://juliemr.github.io/protractor-demo/' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > element< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > by< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > model< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' first' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > sendKeys< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token number" style = "color:#36acaa" > 1< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > element< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token plain" > by< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span class = "token function" style = "color:#d73a49" > model< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' second' < / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span clas
< p > Sample Puppeteer migration:< / p >
2024-01-02 10:04:58 +00:00
< div class = "language-ts codeBlockContainer_Ckt0 theme-code-block" style = "--prism-color:#393A34;--prism-background-color:#f6f8fa" > < div class = "codeBlockContent_biex" > < pre tabindex = "0" class = "prism-code language-ts codeBlock_bY9V thin-scrollbar" style = "color:#393A34;background-color:#f6f8fa" > < code class = "codeBlockLines_e6Vv" > < span class = "token-line" style = "color:#393A34" > < span class = "token keyword" style = "color:#00009f" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > getBrowserState< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:#e3116c" > ' ./utils' < / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > describe< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' Puppeteer Demo' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > setupBrowserHooks< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > it< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token string" style = "color:#e3116c" > ' should add one and two' < / span > < span class = "token punctuation" style = "color:#393A34" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > function< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > const< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:#393A34" > {< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > }< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:#393A34" > =< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:#d73a49" > getBrowserState< / span > < span class = "token punctuation" style = "color:#393A34" > (< / span > < span class = "token punctuation" style = "color:#393A34" > )< / span > < span class = "token punctuation" style = "color:#393A34" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#393A34" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:#00009f" > await< / span > < span class = "token plain" > page< / span > < span class = "token punctuation" style = "color:#393A34" > .< / span > < span
2023-08-23 12:45:53 +00:00
< / body >
< / html >
