diff --git a/versioned_docs/version-v3/testing/e2e-testing.md b/versioned_docs/version-v3/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v3/testing/e2e-testing.md +++ b/versioned_docs/version-v3/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.0/testing/e2e-testing.md b/versioned_docs/version-v4.0/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.0/testing/e2e-testing.md +++ b/versioned_docs/version-v4.0/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.1/testing/e2e-testing.md b/versioned_docs/version-v4.1/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.1/testing/e2e-testing.md +++ b/versioned_docs/version-v4.1/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.10/testing/e2e-testing.md b/versioned_docs/version-v4.10/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.10/testing/e2e-testing.md +++ b/versioned_docs/version-v4.10/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.11/testing/e2e-testing.md b/versioned_docs/version-v4.11/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.11/testing/e2e-testing.md +++ b/versioned_docs/version-v4.11/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.12/testing/e2e-testing.md b/versioned_docs/version-v4.12/testing/e2e-testing.md index e3151f6e1..c96262e0f 100644 --- a/versioned_docs/version-v4.12/testing/e2e-testing.md +++ b/versioned_docs/version-v4.12/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.13.0/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.13.0/testing/stencil-testrunner/05-e2e-testing.md index 597c041c7..83fd44f46 100644 --- a/versioned_docs/version-v4.13.0/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.13.0/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.14/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.14/testing/stencil-testrunner/05-e2e-testing.md index 8bc97bfa1..47ba218df 100644 --- a/versioned_docs/version-v4.14/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.14/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.15/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.15/testing/stencil-testrunner/05-e2e-testing.md index 8bc97bfa1..47ba218df 100644 --- a/versioned_docs/version-v4.15/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.15/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.16/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.16/testing/stencil-testrunner/05-e2e-testing.md index 8bc97bfa1..47ba218df 100644 --- a/versioned_docs/version-v4.16/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.16/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.17/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.17/testing/stencil-testrunner/05-e2e-testing.md index 8bc97bfa1..47ba218df 100644 --- a/versioned_docs/version-v4.17/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.17/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.18/testing/stencil-testrunner/05-e2e-testing.md b/versioned_docs/version-v4.18/testing/stencil-testrunner/05-e2e-testing.md index 8bc97bfa1..47ba218df 100644 --- a/versioned_docs/version-v4.18/testing/stencil-testrunner/05-e2e-testing.md +++ b/versioned_docs/version-v4.18/testing/stencil-testrunner/05-e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.2/testing/e2e-testing.md b/versioned_docs/version-v4.2/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.2/testing/e2e-testing.md +++ b/versioned_docs/version-v4.2/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.3/testing/e2e-testing.md b/versioned_docs/version-v4.3/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.3/testing/e2e-testing.md +++ b/versioned_docs/version-v4.3/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.4/testing/e2e-testing.md b/versioned_docs/version-v4.4/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.4/testing/e2e-testing.md +++ b/versioned_docs/version-v4.4/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.5/testing/e2e-testing.md b/versioned_docs/version-v4.5/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.5/testing/e2e-testing.md +++ b/versioned_docs/version-v4.5/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.6/testing/e2e-testing.md b/versioned_docs/version-v4.6/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.6/testing/e2e-testing.md +++ b/versioned_docs/version-v4.6/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.7/testing/e2e-testing.md b/versioned_docs/version-v4.7/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.7/testing/e2e-testing.md +++ b/versioned_docs/version-v4.7/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.8/testing/e2e-testing.md b/versioned_docs/version-v4.8/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.8/testing/e2e-testing.md +++ b/versioned_docs/version-v4.8/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript diff --git a/versioned_docs/version-v4.9/testing/e2e-testing.md b/versioned_docs/version-v4.9/testing/e2e-testing.md index f8825b3cf..4efe2bdf8 100644 --- a/versioned_docs/version-v4.9/testing/e2e-testing.md +++ b/versioned_docs/version-v4.9/testing/e2e-testing.md @@ -24,6 +24,7 @@ Most methods are async and return Promises. Use `async` and `await` to declutter - `find(selector: string)`: Find an element that matches the selector. Similar to `document.querySelector`. - `setContent(html: string)`: Sets the content of a page. This is where you would include the markup of the component under test. +- `goto(url: string)`: open a page served by the dev server. URL has to start with `/`. - `setViewport(viewport: Viewport)`: Updates the page to emulate a device display. This is helpful for testing a component's behavior in different orientations and viewport sizes. - `waitForChanges()`: Both Stencil and Puppeteer have an asynchronous architecture, which is a good thing for performance. Since all calls are async, it's required that `await page.waitForChanges()` is called when changes are made to components. @@ -42,6 +43,15 @@ describe('example', () => { }); ``` +## Options + +The `newE2EPage` accepts the following options: + +- `html`: a HTML template, e.g. containing your Stencil component to be rendered in the browser (same as calling `page.setContent('...')`) +- `url`: opens a url to open a page served by the [dev server](./dev-server) (option will be ignored if `html` is set, same as calling `page.goto('...')`) +- `failOnConsoleError`: If set to `true`, Stencil will throw an error if a console error occurs (default: `false`) +- `failOnNetworkError`: If set to `true`, Stencil will throw an error if a network request fails (default: `false`) + ## Example End-to-end Test ```typescript