{"id":1032,"date":"2016-05-18T18:47:33","date_gmt":"2016-05-18T18:47:33","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1032"},"modified":"2016-05-18T21:52:10","modified_gmt":"2016-05-18T21:52:10","slug":"snapshot-ionic-frameworks-fail-safe","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe","title":{"rendered":"Snapshot: Ionic Framework’s Fail-Safe"},"content":{"rendered":"

\"snapshot-header\"

When our team makes changes to a component in the framework, we want to make sure those changes don\u2019t inadvertently mess up components elsewhere. So, we built a solution for ourselves: Snapshot. Snapshot has been an incredibly valuable tool for tracking all our changes, and we wanted to share how we use it to ensure that Ionic is thoroughly tested to prevent breaking your apps!<\/p>\n

<\/p>\n

What is Snapshot, Anyway?<\/h3>\n

Snapshot is an internal tool that runs end-to-end tests and takes a screenshot for every command. Each time the tool runs, the Snapshot is assigned a unique ID, which is associated with all of the screenshots taken. Upon completion of the task, the screenshots are uploaded to a server where they can be viewed.<\/p>\n

Snapshot uses Protractor<\/a> to run the commands for each end-to-end test. Protractor is an end-to-end testing tool used by the Angular team to test their apps, and we\u2019re able to use it with Snapshot to visually represent the end-to-end tests. Pretty neat, right?<\/p>\n

How Does Ionic Use Snapshot?<\/h3>\n

Snapshot can be launched in Ionic by running a single Gulp<\/a> task, gulp snapshot<\/code>. The gulp task runs each end-to-end test for three different platforms: android<\/code>, ios<\/code> and windows<\/code>. We run Snapshot against all of these platforms, in order to test each mode<\/a>. Each time we make a change in the framework, we run Snapshot, and check for any visual changes that may have occurred in the framework, in comparison to the Master Snapshot.<\/p>\n

What\u2019s the Master Snapshot?<\/h4>\n

The Master Snapshot is the most recent Snapshot that has been hand-selected and approved by us. Not every Snapshot that gets created will become the Master Snapshot. When we run Snapshot, occasionally we\u2019ll notice a change that we didn\u2019t mean to make. In this case, we\u2019ll fix the problem causing the change, and then run it again. When we review all of the screenshots in a Snapshot and determine that any changes were on purpose, we update the Master Snapshot to use that<\/em> Snapshot.<\/p>\n

Configuring Snapshot<\/h4>\n

The Gulp task uses a Snapshot configuration file that defines the location of the end-to-end tests. In most cases, we\u2019ll want to take screenshots of every end-to-end test in the framework. However, there are times when we\u2019re only concerned with a specific component, and in those cases, we can change the configuration to only run the end-to-end tests for that component. Snapshot can be used to create screenshots from anywhere in our end-to-end tests.<\/p>\n

Managing Snapshot<\/h4>\n

Snapshot can be used to compare any two tests from the interface where our Snapshots are uploaded. To compare two tests, we select the tests we want, using their unique IDs, and then click on \u201cCompare Selected Tests\u201d to see the differences between the tests.<\/p>\n

When two tests don\u2019t match, Snapshot will highlight the differences in bright purple. When the change was made on purpose, it\u2019s okay that there is a mismatch between the Master Snapshot and the current Snapshot. In this case, we will update the current Snapshot to be the Master Snapshot, so that when we run Snapshot in the future, it won\u2019t continue to show us a mismatch. The following image shows a change to the framework that was made by fixing a bug. The screenshot on the far left is the Master Snapshot, the middle screen is the screenshot of the latest Snapshot, and the right screenshot shows the differences between the two. After updating the Master Snapshot to the Snapshot containing the screenshot in the middle, all future Snapshots will be compared against that Snapshot.<\/p>\n

Sometimes, we make a mistake and change something in the framework that we didn\u2019t mean to change. When this happens, running Snapshot shows us where we messed up, and then we can fix it. The image below shows a change we made to the framework, in which a border was accidentally added to alert. We won\u2019t make this Snapshot the Master Snapshot, since we need to remove the border. After fixing the change, we will run Snapshot again, and once it looks good to us, we will select it as the Master Snapshot.<\/p>\n

Conclusion<\/h3>\n

We built Snapshot to further ensure the framework is continuously well tested, and to reassure you that future versions won\u2019t break your apps. Creating tests for literally all of the scenarios we can think of enables us to catch any pesky bugs in the framework before you or your users encounter them.<\/p>\n

We like to think of Snapshot as our safety net before pushing new code live. We do this to make your apps better, and to ensure they\u2019re highly tested before you even start working on them.<\/p>\n","protected":false},"excerpt":{"rendered":"

When our team makes changes to a component in the framework, we want to make sure those changes don\u2019t inadvertently mess up components elsewhere. So, we built a solution for ourselves: Snapshot. Snapshot has been an incredibly valuable tool for tracking all our changes, and we wanted to share how we use it to ensure […]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13],"class_list":["post-1032","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2"],"acf":[],"yoast_head":"\nSnapshot: Ionic Framework's Fail-Safe - Ionic Blog<\/title>\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\/snapshot-ionic-frameworks-fail-safe\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Snapshot: Ionic Framework's Fail-Safe\" \/>\n<meta property=\"og:description\" content=\"When our team makes changes to a component in the framework, we want to make sure those changes don\u2019t inadvertently mess up components elsewhere. So, we built a solution for ourselves: Snapshot. Snapshot has been an incredibly valuable tool for tracking all our changes, and we wanted to share how we use it to ensure […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-18T18:47:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-18T21:52:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png\" \/>\n<meta name=\"author\" content=\"Brandy Smith\" \/>\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=\"Brandy Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\"},\"author\":{\"name\":\"Brandy Smith\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26\"},\"headline\":\"Snapshot: Ionic Framework’s Fail-Safe\",\"datePublished\":\"2016-05-18T18:47:33+00:00\",\"dateModified\":\"2016-05-18T21:52:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\"},\"wordCount\":788,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png\",\"keywords\":[\"Ionic\",\"Ionic 2\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\",\"url\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\",\"name\":\"Snapshot: Ionic Framework's Fail-Safe - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png\",\"datePublished\":\"2016-05-18T18:47:33+00:00\",\"dateModified\":\"2016-05-18T21:52:10+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header.png\",\"width\":1348,\"height\":586},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snapshot: Ionic Framework’s Fail-Safe\"}]},{\"@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\/fcd7940afdce3781b3381ec7c1b16c26\",\"name\":\"Brandy Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png\",\"caption\":\"Brandy Smith\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/brandy\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Snapshot: Ionic Framework's Fail-Safe - Ionic Blog","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\/snapshot-ionic-frameworks-fail-safe","og_locale":"en_US","og_type":"article","og_title":"Snapshot: Ionic Framework's Fail-Safe","og_description":"When our team makes changes to a component in the framework, we want to make sure those changes don\u2019t inadvertently mess up components elsewhere. So, we built a solution for ourselves: Snapshot. Snapshot has been an incredibly valuable tool for tracking all our changes, and we wanted to share how we use it to ensure […]","og_url":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe","og_site_name":"Ionic Blog","article_published_time":"2016-05-18T18:47:33+00:00","article_modified_time":"2016-05-18T21:52:10+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png"}],"author":"Brandy Smith","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Brandy Smith","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe"},"author":{"name":"Brandy Smith","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/fcd7940afdce3781b3381ec7c1b16c26"},"headline":"Snapshot: Ionic Framework’s Fail-Safe","datePublished":"2016-05-18T18:47:33+00:00","dateModified":"2016-05-18T21:52:10+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe"},"wordCount":788,"commentCount":8,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png","keywords":["Ionic","Ionic 2"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe","url":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe","name":"Snapshot: Ionic Framework's Fail-Safe - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header-1024x445.png","datePublished":"2016-05-18T18:47:33+00:00","dateModified":"2016-05-18T21:52:10+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/snapshot-header.png","width":1348,"height":586},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/snapshot-ionic-frameworks-fail-safe#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Snapshot: Ionic Framework’s Fail-Safe"}]},{"@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\/fcd7940afdce3781b3381ec7c1b16c26","name":"Brandy Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2024\/11\/headshot-zoomed-150x150.png","caption":"Brandy Smith"},"url":"https:\/\/ionic.io\/blog\/author\/brandy"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1032","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1032"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1032\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}