{"id":6153,"date":"2024-05-09T10:20:56","date_gmt":"2024-05-09T14:20:56","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6153"},"modified":"2024-05-09T10:21:00","modified_gmt":"2024-05-09T14:21:00","slug":"testing-stencil-components-with-ease-using-playwright","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright","title":{"rendered":"Testing Stencil Components with Ease using Playwright"},"content":{"rendered":"\n<p>You may have caught <a href=\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-webdriverio\">our recent post<\/a> about testing Stencil components using WebdriverIO. We\u2019ve also expanded support for another testing tool: <a href=\"https:\/\/playwright.dev\/\">Playwright<\/a>! Created by Microsoft, Playwright is an automated end-to-end (e2e) testing framework built to run on all modern browser engines and operating systems. It leverages the DevTools protocol to provide reliable tests that run in actual browsers.<\/p>\n\n\n\n<p>Let\u2019s look at how to test Stencil components with Playwright.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setup<\/h2>\n\n\n\n<p>If your Stencil project has an existing end-to-end testing setup via the <a href=\"https:\/\/stenciljs.com\/docs\/end-to-end-testing\">Stencil Test Runner<\/a>, learn how to <a href=\"https:\/\/stenciljs.com\/docs\/testing\/playwright\/overview#migrating-to-playwright\">sample the Playwright adapter<\/a> or migrate tests over time.<\/p>\n\n\n\n<p>Leverage the <a href=\"https:\/\/www.npmjs.com\/package\/@stencil\/playwright\">Stencil Playwright testing adapter<\/a> to add Playwright to an existing Stencil project. The Stencil team built this tool to help Stencil and Playwright work better together. The best part is that you&#8217;ll write your tests using the same APIs defined and documented by Playwright.<\/p>\n\n\n\n<p>To use Playwright, <a href=\"https:\/\/stenciljs.com\/docs\/testing\/playwright\/overview#set-up\">first install the Stencil Playwright adapter into an existing Stencil project<\/a>, then configure Playwright, and finally, write some tests.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">End-to-End Testing<\/h2>\n\n\n\n<p>For the most part, you write end-to-end Stencil tests with Playwright using the same public APIs. The Stencil Playwright adapter adds extensions that provide additional fixtures and handle nuances related to web component hydration. <strong>Be sure to import from <code>@stencil\/playwright<\/code>, not <code>@playwright\/test<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { test } from &#039;@stencil\/playwright&#039;;<\/code><\/pre>\n\n\n\n<p>Let\u2019s explore some testing patterns.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">page.goto()<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/stenciljs.com\/docs\/testing\/playwright\/e2e-testing#pagegoto\"><code>goto()<\/code> method<\/a> allows tests to load a predefined HTML template. This pattern is helpful for executing tests that all use the same HTML code or if additional <code>script<\/code> or <code>style<\/code> tags need to be included in the HTML. Create an HTML file that contains all the Stencil components to test:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;!-- my-component.e2e.html \u2013&gt;\n&lt;!doctype html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf8&quot; \/&gt;\n\n    &lt;!-- Replace with the path to your entrypoint --&gt;\n    &lt;script src=&quot;..\/..\/..\/build\/test-app.esm.js&quot; type=&quot;module&quot;&gt;&lt;\/script&gt;\n    &lt;script src=&quot;..\/..\/..\/build\/test-app.js&quot; nomodule&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;my-component first=&quot;Stencil&quot;&gt;&lt;\/my-component&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Next, write the e2e test to verify that &lt;my-component> writes out the name \u201cStencil\u201d to the page since the \u201cfirst\u201d prop is set to \u201cStencil\u201d:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">import { expect } from &#039;@playwright\/test&#039;;\nimport { test } from &#039;@stencil\/playwright&#039;;\n\ntest.describe(&#039;my-component&#039;, () =&gt; {\n  test(&#039;should render the correct name&#039;, async ({ page }) =&gt; {\n    \/\/ The path here is the path to the www output relative to the dev server root directory\n    await page.goto(&#039;\/components\/my-component\/test\/my-component.e2e.html&#039;);\n\n    \/\/ Rest of test\n    const component = await page.locator(\u2018my-component\u2019);\n    await expect(component).toHaveText(`Hello World! I\u2019m Stencil`);\n  });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">page.setContent()<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/stenciljs.com\/docs\/testing\/playwright\/e2e-testing#pagesetcontent\"><code>setContent()<\/code> method<\/a> allows tests to define their own HTML code on a test-by-test basis. This pattern is helpful if the HTML for a test is small or to avoid affecting other tests using the <code>page.goto()<\/code> pattern and modifying a shared HTML template file.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ my-component.e2e.ts\nimport { expect } from &#039;@playwright\/test&#039;;\nimport { test } from &#039;@stencil\/playwright&#039;;\n\ntest.describe(&#039;my-component&#039;, () =&gt; {\n  test(&#039;should render the correct name&#039;, async ({ page }) =&gt; {\n    await page.setContent(&#039;&lt;my-component first=&quot;Stencil&quot;&gt;&lt;\/my-component&gt;&#039;);\n\n    \/\/ Same assertion as the first test above\n  });\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">page.waitForChanges()<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/stenciljs.com\/docs\/testing\/playwright\/e2e-testing#pagewaitforchanges\"><code>waitForChanges()<\/code> method<\/a> is a utility for waiting for Stencil components to rehydrate after an operation that results in a re-render:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ my-component.e2e.ts\nimport { expect } from &#039;@playwright\/test&#039;;\nimport { test } from &#039;@stencil\/playwright&#039;;\n\ntest.describe(&#039;my-component&#039;, () =&gt; {\n  test(&#039;should render the correct name&#039;, async ({ page }) =&gt; {\n    \/\/ Assume a template setup with the `my-component` component and a `button`\n    await page.goto(&#039;\/my-component\/my-component.e2e.html&#039;);\n\n    const button = page.locator(&#039;button&#039;);\n    \/\/ Assume clicking the button changes the `@Prop()` values on `my-component`\n    button.click();\n    await page.waitForChanges();\n  });\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Write e2e Tests Today<\/h2>\n\n\n\n<p>As you can see, the above three testing patterns are straightforward to implement, even if you are new to Playwright testing. Once your tests have been written, executing them is as simple as running <code>npx playwright test<\/code> from the root of the Stencil project.<\/p>\n\n\n\n<p>This was just a taste of what Playwright and the Stencil Playwright adapter offer. There\u2019s much more to explore, including <a href=\"https:\/\/playwright.dev\/docs\/running-tests#debugging-tests\">debugging e2e tests<\/a> and <a href=\"https:\/\/playwright.dev\/docs\/screenshots\">screenshot\/visual testing<\/a>.&nbsp;<\/p>\n\n\n\n<p>Happy testing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve also expanded support for another testing tool: Playwright! <\/p>\n","protected":false},"author":106,"featured_media":6154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"21","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"576495","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/testing-stencil-components-with-ease-using-playwright\/241602","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,122,223],"tags":[76],"class_list":["post-6153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-product","category-stencil","tag-stencil"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Testing Stencil Components with Ease using Playwright - Ionic Blog<\/title>\n<meta name=\"description\" content=\"We&#039;ve added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing Stencil Components with Ease using Playwright\" \/>\n<meta property=\"og:description\" content=\"We&#039;ve added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-09T14:20:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-09T14:21:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stencil Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stencil Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\"},\"author\":{\"name\":\"Stencil Team\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646\"},\"headline\":\"Testing Stencil Components with Ease using Playwright\",\"datePublished\":\"2024-05-09T14:20:56+00:00\",\"dateModified\":\"2024-05-09T14:21:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\"},\"wordCount\":444,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png\",\"keywords\":[\"stencil\"],\"articleSection\":[\"All\",\"Product\",\"Stencil\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\",\"url\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\",\"name\":\"Testing Stencil Components with Ease using Playwright - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png\",\"datePublished\":\"2024-05-09T14:20:56+00:00\",\"dateModified\":\"2024-05-09T14:21:00+00:00\",\"description\":\"We've added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing Stencil Components with Ease using Playwright\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646\",\"name\":\"Stencil Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png\",\"caption\":\"Stencil Team\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/stencil\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Testing Stencil Components with Ease using Playwright - Ionic Blog","description":"We've added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright","og_locale":"en_US","og_type":"article","og_title":"Testing Stencil Components with Ease using Playwright","og_description":"We've added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.","og_url":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright","og_site_name":"Ionic Blog","article_published_time":"2024-05-09T14:20:56+00:00","article_modified_time":"2024-05-09T14:21:00+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","type":"image\/png"}],"author":"Stencil Team","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Stencil Team","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright"},"author":{"name":"Stencil Team","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646"},"headline":"Testing Stencil Components with Ease using Playwright","datePublished":"2024-05-09T14:20:56+00:00","dateModified":"2024-05-09T14:21:00+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright"},"wordCount":444,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","keywords":["stencil"],"articleSection":["All","Product","Stencil"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright","url":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright","name":"Testing Stencil Components with Ease using Playwright - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","datePublished":"2024-05-09T14:20:56+00:00","dateModified":"2024-05-09T14:21:00+00:00","description":"We've added support for another testing tool! This blog is an in-depth look at how to test Stencil components with Playwright.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/testing-stencil-components-with-ease-using-playwright#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Testing Stencil Components with Ease using Playwright"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/82fcd9aa19604364f3c30a946de8e646","name":"Stencil Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/05\/stencil-white-on-color-150x150.png","caption":"Stencil Team"},"url":"https:\/\/ionic.io\/blog\/author\/stencil"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/05\/playwright-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=6153"}],"version-history":[{"count":4,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6153\/revisions"}],"predecessor-version":[{"id":6159,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/6153\/revisions\/6159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/6154"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=6153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=6153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=6153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}