{"id":39466,"date":"2022-06-22T11:35:39","date_gmt":"2022-06-22T18:35:39","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=39466"},"modified":"2022-06-22T11:35:40","modified_gmt":"2022-06-22T18:35:40","slug":"how-to-simplify-ui-tests-bi-directional-contract-testing","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/","title":{"rendered":"How to Simplify UI Tests with Bi-Directional Contract Testing"},"content":{"rendered":"\n<p><em>Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-end-to-end-testing-within-microservices\">End-to-End Testing within Microservices<\/h2>\n\n\n\n<p>When you are writing end-to-end tests with Cypress, you want to make sure your tests are not flaky, run quickly and are independent of any dependencies. What if you could add contract tests to stabilise, speed up and isolate your UI tests? There\u2019s a new kid on the block \u2013 now this is possible with Pactflow&#8217;s new feature, bi-directional contracts. UI tests often offer the confidence of the application working end-to-end, which is why utilising contract tests can eliminate some of the challenges mentioned above. To attempt to simplify the explanation of this testing approach, I\u2019m using a recipe web application to describe the interactions between the consumer (web app) and provider (api service). If you want to learn more about API Contract Testing checkout the Pactflow <a href=\"https:\/\/docs.pactflow.io\/docs\/workshops\/introduction\">docs<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/recipes-web-service.jpg\" alt=\"recipe web app on an ipad\" style=\"width: 400px;\"><\/p>\n\n\n\n<p><a href=\"https:\/\/www.leanix.net\/en\/blog\/a-brief-history-of-microservices#:~:text=The%20term%20%22micro%20web%20services,experimenting%20with%20at%20the%20time.\">Microservices<\/a> was a term first coined in 2011, and microservices have since become a popular way to build web services. With the adoption of microservices, <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/refining-test-automation-microservice-architecture\/\">testing techniques<\/a> have had to adapt as well. Integration tests become really important when testing microservices, ensuring that any changes don\u2019t impact the consuming services or applications.<\/p>\n\n\n\n<p><a href=\"https:\/\/micro-frontends.org\/#:~:text=The%20term%20Micro%20Frontends%20first,of%20a%20micro%20service%20architecture.\">Micro Frontends<\/a> started being recognised around 2016. Often when building microservices you need a micro frontend to make the application truly independent. In this setup the integration between the web app and the API service is much easier to test in isolation. The benefits of an architecture that uses micro frontends and microservices together mean you can release changes quickly and with confidence. Add in contract testing to the mix, and you can apply the independent approach to end-to-end testing as well.<\/p>\n\n\n\n<p>Traditionally the running of end-to-end tests looks a little something similar to this:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/end-to-end-test-flow.jpg\" alt=\"diagram of end-to-end test flow\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-simplify-your-ui-tests-with-contract-testing\">How to Simplify Your UI Tests with Contract Testing<\/h2>\n\n\n\n<p>Using this traditional approach, integration points are covered from the end-to-end tests which can take quite a while to run, are difficult to maintain and are often costly to run within the continuous integration pipeline. <a href=\"https:\/\/martinfowler.com\/articles\/microservice-testing\/#testing-contract-introduction\">Contract Testing<\/a> does not replace the need for integration tests but minimises the amount of tests needed at that level.\u00a0<\/p>\n\n\n\n<p>The introduction of bi-directional contract tests now means you can generate contracts from the UI component tests or end-to-end tests. A great opportunity to utilise the existing tests you already have, this will then provide the confidence that the application works end-to-end without running a large suite of end-to-end tests. The contracts could also be used as stubs within your Cypress tests once they\u2019ve been generated.<\/p>\n\n\n\n<p>In my podcast, I spoke to a developer advocate from Pactflow who told me that they realized there was a barrier to getting started with contract testing. Which was that engineers already had tools which were defining contract interactions such as in mocks or pre-defined openAPI specifications. The duplication of adding pact code to generate these contracts seemed like a lot of work when the contracts had already been defined. Often development teams realise the potential of introducing contracts between services but don\u2019t quite know how to get started or what the true benefits are.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-benefits-do-api-contract-tests-bring-to-your-ui-tests\">What Benefits Do API Contract Tests Bring to Your UI Tests?<\/h3>\n\n\n\n<ul><li>End-to-end tests can run in isolation, while retaining the confidence of fully integrated tests<\/li><li>Service providers will verify any API changes before deploying making dependent applications more stable<\/li><li>How the consumer app interacts with the API service is visualised and better understood as a result<\/li><li>Versioning and tagging contracts allows you to deploy safely between environments<\/li><\/ul>\n\n\n\n<p>In a world of micro frontends and microservices, it&#8217;s important to isolate services while ensuring quality is not impacted. By adding contract tests to your UI testing suite, not only do you gain the benefits listed you also gain time and costs. Running tests in isolation means your tests are faster to run, with a shorter feedback loop and no need to rely on a dedicated integration environment, reducing environment costs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-benefits-of-bi-directional-contract-testing\">The Benefits of Bi-Directional Contract Testing<\/h2>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bi-directional-testing.jpg\" alt=\"two way road sign\" style=\"width: 400px;\"><\/p>\n\n\n\n<p>When building the example recipe app, two teams were involved in defining the API schema. An API contract was documented on the teams\u2019 wiki, which presents the ingredients for a specific cake recipe. Both teams go away and build their parts of the application in line with the API documentation.&nbsp;<\/p>\n\n\n\n<p>The frontend team uses mocks to test and build the recipe Micro Frontend\u00b9. They want to deploy their Micro Frontend to an environment to see whether they can successfully integrate with the ingredients API service\u00b2. Also during the development process they realized they needed another field within the ingredients service\u00b3, so they communicated with the API team and the developer on the team made the change in the code which generates a new swagger openAPI document\u2074 (however they didn\u2019t update the documentation).&nbsp;<\/p>\n\n\n\n<p>From this scenario there are a couple of things to draw attention to (see numbers 1-4 above):<\/p>\n\n\n\n<ol><li>Mocks are often used to test integrations which can be utilised within bi-directional contract testing as test scenarios<\/li><li>With contract testing you don\u2019t need a dedicated environment in order to test the interactions between web app and API service<\/li><li>Specifications defined before development often change during implementation which can be documented and continuously updated within a centralised contract store such as Pactflow<\/li><li>Generated openAPI specifications generated by code can be uploaded to the pact broker as well which can be compared directly with the frontend mocks<\/li><\/ol>\n\n\n\n<p>As mentioned earlier, the introduction of bi-directional contract testing allows you to generate contracts from your existing tests. Pactflow now provides adaptors which you can use to generate contracts from your mocks for example using Cypress:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>describe('Great British Bake Off', () =&gt; {\n    before(() =&gt; {\n        cy.setupPact('bake-off-ui', 'ingredients-api')\n        cy.intercept(`http:\/\/localhost:5000\/ingredients\/chocolate`,\n        {\n          statusCode: 200,\n          body: &#91;\"sugar\"],\n          headers: { 'access-control-allow-origin': '*' }\n        }).as('ingredients')\n    })\n\n    it('Cake ingredients', () =&gt; {\n        cy.visit('\/ingredients\/chocolate')\n        cy.get('button').click()\n        cy.usePactWait('ingredients').its('response.statusCode').should('eq', 200)\n        cy.contains('li', 'sugar').should('be.visible')\n    })\n})<\/code><\/pre>\n\n\n\n<p>Once you have generated a contract from your end-to-end tests, the interactions with the service are now passed to the API provider via the contract store hosted in <a href=\"https:\/\/pactflow.io\/\">Pactflow<\/a>. Sharing the contracts means that the interactions of how the web app behaves after implementation aligns with the API service or if any changes occur post initial development. Think of it like sharing test scenarios with the backend engineers which they will replay on the service they have built. The contract document looks similar to this:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>{\n    \"consumer\": {\n        \"name\": \"bake-off-ui\"\n    },\n    \"provider\": {\n        \"name\": \"ingredients-api\"\n    },\n    \"interactions\": &#91;\n        {\n            \"description\": \"Cake ingredients\",\n            \"request\": {\n                \"method\": \"GET\",\n                \"path\": \"\/ingredients\/chocolate\",\n                \"headers\": {\n                    \"accept\": \"application\/json\"\n                },\n            },\n            \"response\": {\n                \"status\": 200,\n                \"body\": &#91;\n                    \"sugar\"\n                ]\n            }\n        }\n    ]\n}<\/code><\/pre>\n\n\n\n<p>Once the openAPI specification has been uploaded by the API service and the contracts have been uploaded by the web application to Pactflow, there is just one more step remaining to call <code>can-i-deploy<\/code>, which will compare both sides and check that everything is as expected. Voila, the process is complete! You can now safely run tests which are verified by the API service provider and reflect the actual behaviour of the web application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-changing-the-mindset-of-api-test-responsibility\">Changing the Mindset of API Test Responsibility<\/h2>\n\n\n\n<p>I know it\u2019s a lot to take in and can be a bit confusing to get your head around this testing approach, especially when you are used to the traditional way of testing integrations with a dedicated test environment or by calling the endpoints directly from within your tests. I encourage you to read more about contract testing on my <a href=\"https:\/\/www.pactman.co.uk\/api-contract-testing-blog\">blog<\/a>, and to listen to my <a href=\"https:\/\/www.pactman.co.uk\/contract-testing-podcast\">podcast<\/a> where we talk about how to get started with contract testing.<\/p>\n\n\n\n<p>When you are building software, quality is everyone\u2019s responsibility and everyone is working towards the same goal. When you look at it like that then interactions between integrations are the responsibility of everyone. I have often been involved in conversations where the development team building the API service have said it\u2019s not their responsibility what happens outside of their code and vice versa. The introduction of contracts to your UI tests allows you to break down this perception and start having conversations with the API development team to speak the same language.&nbsp;<\/p>\n\n\n\n<p>For me, the biggest benefit that comes from implementing contract tests is the <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/quality-leadership-influence-informal-leadership\/\">conversations that come out of it<\/a>. Having these conversations about API design early, with clear examples, makes developing microservices and micro frontends much easier.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.<\/p>\n","protected":false},"author":106,"featured_media":39473,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[11589,16721,10357,12691,16694,12690,16720],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Simplify UI Tests with Bi-Directional Contract Testing - Applitools<\/title>\n<meta name=\"description\" content=\"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Simplify UI Tests with Bi-Directional Contract Testing\" \/>\n<meta property=\"og:description\" content=\"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-22T18:35:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-22T18:35:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lewis Prescott\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wuigprescott\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lewis Prescott\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\"},\"author\":{\"name\":\"Lewis Prescott\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/d95e8c79f7ecb25441dcbd932c45ae50\"},\"headline\":\"How to Simplify UI Tests with Bi-Directional Contract Testing\",\"datePublished\":\"2022-06-22T18:35:39+00:00\",\"dateModified\":\"2022-06-22T18:35:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\"},\"wordCount\":1331,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg\",\"keywords\":[\"API\",\"contract testing\",\"Cypress\",\"Developers\",\"microservices\",\"Test Engineers\",\"ui testing\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\",\"name\":\"How to Simplify UI Tests with Bi-Directional Contract Testing - Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg\",\"datePublished\":\"2022-06-22T18:35:39+00:00\",\"dateModified\":\"2022-06-22T18:35:40+00:00\",\"description\":\"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Simplify UI Tests with Bi-Directional Contract Testing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/d95e8c79f7ecb25441dcbd932c45ae50\",\"name\":\"Lewis Prescott\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c4c5ff67c878fa1eb6f2164c7a02efab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c4c5ff67c878fa1eb6f2164c7a02efab?s=96&d=mm&r=g\",\"caption\":\"Lewis Prescott\"},\"description\":\"Lewis is QA Lead at Cera Care. He is a course author at Test Automation University and an advocate for API contract testing. He is passionate about sharing his knowledge and experience to the testing community through his podcast, blog, online courses and teaching the next generation. Outside of work, Lewis is a dad, husband and keen cyclist having cycled to Paris from London in the past. You can follow Lewis on Twitter @WuigPrescott or at https:\/\/www.pactman.co.uk\",\"sameAs\":[\"https:\/\/www.pactman.co.uk\",\"https:\/\/x.com\/wuigprescott\"],\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/lewis-prescott\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Simplify UI Tests with Bi-Directional Contract Testing - Applitools","description":"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.","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:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/","og_locale":"en_US","og_type":"article","og_title":"How to Simplify UI Tests with Bi-Directional Contract Testing","og_description":"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2022-06-22T18:35:39+00:00","article_modified_time":"2022-06-22T18:35:40+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg","type":"image\/jpeg"}],"author":"Lewis Prescott","twitter_card":"summary_large_image","twitter_creator":"@wuigprescott","twitter_misc":{"Written by":"Lewis Prescott","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/"},"author":{"name":"Lewis Prescott","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/d95e8c79f7ecb25441dcbd932c45ae50"},"headline":"How to Simplify UI Tests with Bi-Directional Contract Testing","datePublished":"2022-06-22T18:35:39+00:00","dateModified":"2022-06-22T18:35:40+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/"},"wordCount":1331,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg","keywords":["API","contract testing","Cypress","Developers","microservices","Test Engineers","ui testing"],"articleSection":["Getting Started"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/","name":"How to Simplify UI Tests with Bi-Directional Contract Testing - Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg","datePublished":"2022-06-22T18:35:39+00:00","dateModified":"2022-06-22T18:35:40+00:00","description":"Learn how you can improve and simplify your UI testing using micro frontends and new Pactflow bi-directional API contract testing.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/06\/bidirectional-contracts-ui-testing_831x542.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-simplify-ui-tests-bi-directional-contract-testing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/"},{"@type":"ListItem","position":3,"name":"How to Simplify UI Tests with Bi-Directional Contract Testing"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/d95e8c79f7ecb25441dcbd932c45ae50","name":"Lewis Prescott","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c4c5ff67c878fa1eb6f2164c7a02efab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c4c5ff67c878fa1eb6f2164c7a02efab?s=96&d=mm&r=g","caption":"Lewis Prescott"},"description":"Lewis is QA Lead at Cera Care. He is a course author at Test Automation University and an advocate for API contract testing. He is passionate about sharing his knowledge and experience to the testing community through his podcast, blog, online courses and teaching the next generation. Outside of work, Lewis is a dad, husband and keen cyclist having cycled to Paris from London in the past. You can follow Lewis on Twitter @WuigPrescott or at https:\/\/www.pactman.co.uk","sameAs":["https:\/\/www.pactman.co.uk","https:\/\/x.com\/wuigprescott"],"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/lewis-prescott\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/39466"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=39466"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/39466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/39473"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=39466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=39466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=39466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}