{"id":1861,"date":"2021-05-21T07:16:12","date_gmt":"2021-05-21T07:16:12","guid":{"rendered":"https:\/\/www.sabre.com\/locations\/india\/?post_type=resources&p=1861"},"modified":"2023-06-06T23:10:42","modified_gmt":"2023-06-06T23:10:42","slug":"approach-to-ci-cd-pipeline-for-ui-development","status":"publish","type":"resources","link":"https:\/\/www.sabre.com\/locations\/india\/resources\/case-study\/approach-to-ci-cd-pipeline-for-ui-development\/","title":{"rendered":"Approach to CI\/CD Pipeline for UI Development"},"content":{"rendered":"<h6><em><strong>This case study has been authored by <a href=\"https:\/\/www.linkedin.com\/in\/naveen-k-m-7508647\/?originalSubdomain=in\" target=\"_blank\" rel=\"noopener noreferrer\">Naveen K M<\/a><\/strong><\/em><\/h6>\r\n\r\n<hr \/>\r\n\r\n<h4><strong>\r\nThe Challenge<\/strong><\/h4>\r\nFor a robust and effective CI\/CD process for UI development (ReactJS \/ Redux apps), the additional capabilities required is primarily around cross-browser testing, accessibility testing, and multi-resolution testing. Many of these are manual steps implemented by Test Engineers, and it slows down the code deployment to production, even if a micro service \/ micro front end-based application is being developed. This case study talks about one such challenge that my team at Sabre faced, and I will share the solution that we came up with to overcome this.\r\n\r\n<hr \/>\r\n\r\n<h4><strong>The Opportunity<\/strong><\/h4>\r\nThe primary objective of the solution is to automate various UI aspects of testing and find the best open source tool which can best fit into the project timelines. Below are various factors considered to arrive at the solution –\r\n<ul>\r\n \t<li>Create reusable code for infrastructure set-up for UI testing in the Cloud<\/li>\r\n \t<li>Develop a library for automation of cross-browser and multi-resolution testing, and update test cases repository and test results via code<\/li>\r\n \t<li>Identify a repeatable way to test accessibility standards for all UI-based applications<\/li>\r\n \t<li>Continuously measure and report page load performance scores, and make it extendable to include the new pages when developed<\/li>\r\n \t<li>Provide a centralized dashboard to collate all test results and reports of multistage-pipeline, across various microservices \/ pages into a single view<\/li>\r\n \t<li>Utilize only open source technologies and reuse Sabre recommended or licensed libraries\/tools\/frameworks<\/li>\r\n<\/ul>\r\n\r\n<hr \/>\r\n\r\n<h4><strong>The Solution<\/strong><\/h4>\r\nThe diagram below summarizes the considerations for what all should be automated, tested, and signed-off, as part of the continuous integration and deployment, before the code is ready to be deployed to higher environments such as UAT or Production.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1862\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-1.png\" alt=\"\" width=\"1280\" height=\"451\" \/>\r\n<blockquote>\r\n<h6 style=\"text-align: center;\"><em>CI\/CD pipeline elements. The ones in <span style=\"color: #00ccff;\">blue<\/span> are specific to UI development<\/em><\/h6>\r\n<\/blockquote>\r\nLet\u2019s deep dive into all of them, and see how an automated pipeline was implemented for each of these –\r\n\r\n<span style=\"color: #808080;\"><strong>Test Environment<\/strong><\/span>\r\n\r\nTypically, CI\/CD pipelines are hosted out of Linux-based environments. It\u2019s a challenge to simulate UI testing with different browsers like IE and Edge, which are not supported in a Linux-based OS. Also, many of these testing use cases need to have browsers launched in the machine, and cannot have accurate test results with <span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/en.wikipedia.org\/wiki\/Headless_browser\">headless browser testing<\/a><\/span>.\r\n\r\nTo overcome this, the team created AWS Cloud formation scripts to launch a Windows server in AWS. The cloud formation scripts include the creation of Windows machine, installation of required open source software like Jenkins, Jenkins plugins, GIT, browsers, UI testing libraries, and scripts to establish connectivity to the Sabre domain. By doing this, as a cloud formation script, it is ensured that even the infrastructure set-up is automated. This helps any product team to turn around a new Windows box for CI\/CD purposes, within the matter of a few seconds. The required firewall settings are also included in the cloud formation script, to allow the minimum needed connectivity (inbound\/outbound).\r\n\r\n<span style=\"color: #808080;\"><strong>\r\nCI\/CD Pipeline<\/strong><\/span>\r\n\r\nThe various elements of testing are knitted together into different steps as depicted in the flowchart below:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1863\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-2.png\" alt=\"\" width=\"778\" height=\"739\" \/>\r\n<blockquote>\r\n<h6 style=\"text-align: center;\"><em>CI\/CD pipeline Elements and Solution<\/em><\/h6>\r\n<\/blockquote>\r\n<span style=\"color: #333333;\"><strong>\r\n♦ Code Quality Checks<\/strong><\/span>\r\n\r\nCode quality is at the heart of any development project, and it supports developers to maintain clean code. The various aspects of good quality code include coding style, code reliability, secure & maintainable code –\r\n\r\n<em><span style=\"color: #333333;\"><u>Coding Style Check with Git Hooks<\/u><\/span><\/em>\r\n\r\nThe team developed a git hook which will do an Auto Lint & Format on Git Commit with Airbnb style guide. This ensures that all the code in the codebase will look like a single person coded it, no matter how many people contributed. A similar git hook was also developed for backend code which checks the Java code style using Google style of java code.\r\n\r\n<em><u>Unit Tests<\/u><\/em>\r\n\r\nThe team did a proof-of-concept on many JavaScript-based unit test frameworks. Based on the evaluation, a combination of Jest\/Enzyme was zeroed in as the best suite for ReactJS based UI apps. The unit tests will run as part of every build, and this will form the input for Sonar coverage metrics too.\r\n\r\n<em><u>Static Code Analysis<\/u><\/em>\r\n\r\nSabre has a well-established Bitbucket integration with Sonar and the team decided to reuse this for JS code analysis. The team developed a custom hook in bitbucket and for every pull request made in bitbucket, it will trigger a Sonar analysis. The sonar analysis checks for code coverage, reliability, security and maintainability. If the quality gates are not passed for the new\/changed code, the pull request cannot be merged with the main line branch. The Jest\/enzyme code coverage report generated as part of the build was plugged into Sonar for reporting the coverage metrics.\r\n<u>\r\n<em>Code Security Analysis<\/em><\/u>\r\n\r\nThe static JS code analysis for security was done by adding a pipeline step to trigger Veracode scan of the code. This CI step includes zipping of the required JS files and initiating a Veracode scan. The results of Veracode scan is visible through the Veracode website or is available via email notification. The team will create a list of defects arising out of Veracode scan and fix the vulnerabilities in a timely manner. A successful CD can be only be triggered upon producing a 100% clean Veracode report.\r\n\r\n \r\n\r\n<span style=\"color: #333333;\"><strong>♦ Functional Testing<\/strong><\/span>\r\n\r\n<em><u>Acceptance Tests in Multiple Browsers \/ Devices \/ Resolutions<\/u><\/em>\r\n\r\nThe core aspect of any UI testing exercise is to automate testing of cross-browsers, devices and form factors effectively. After doing POCs on various open source software available, the team zeroed in on Selenium web driver-based testing.\r\n\r\nA re-usable library was developed based on the Selenium web driver which takes minimal configuration as input to run the tests in multiple browsers, devices, and while setting up the required resolution or form factor. The various tests also can be configured to run at different times of the day and send the automated reports to pre-defined email-IDs. The team also conducted research to identify the most used browsers and most widely used resolution, to set-up as defaults, with the ability to extend for other configurations too.\r\n\r\nThe library will also update the test cases in Rally via API Integration and will update the test results in Rally too. There is also a provision for auto creation of defects in Rally, if a test case fails and this is under development currently.\r\n\r\n \r\n\r\n<span style=\"color: #333333;\"><strong>♦ Performance Testing<\/strong><\/span>\r\n\r\n<em><u>Page Load Performance Test<\/u><\/em>\r\n\r\nIt\u2019s very critical to measure the page load time of UI applications and benchmark it against accepted industry standards. This provides a realistic check on what the end user is experiencing with each page.\r\n\r\nLighthouse is an open-source, automated tool available in ‘Chrome DevTools’ which audits performance, accessibility, progressive web apps, SEO and more. Each audit provides a score out of 100 for these aspects and an indicator on how good or bad the page is performing, like shown below –\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1864 aligncenter\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-3.png\" alt=\"\" width=\"528\" height=\"248\" \/>\r\n\r\nThe team developed a framework with NodeJs, Selenium on top of Lighthouse, to simulate the auditing of each page and the CI tests would only pass if the score is 90 or above. The tests are so scalable that if one develops a new page, adding this to the list of pages to be audited, is just a simple configuration step. Also, it can be used by all other UI apps too. The framework developed also helps in auditing of complex model pop-up load times as well. The audit information data is also pushed to the central dashboard via API and the reports are made available in .csv format as well.\r\n\r\n<em><u>APIs Short Performance & Long Performance Test<\/u><\/em>\r\n\r\nWhile Lighthouse-based testing is focused at UI, much of the performance is based on how quick the APIs responds with the first byte. Jmeter based scripts are developed iteratively to test the API response time under load and they are run for shorter and longer periods, as part of CI & CD.\r\n\r\n \r\n\r\n<span style=\"color: #333333;\"><span style=\"color: #333333;\"><b><strong>♦ <\/strong>Accessibility<\/b><\/span><b style=\"color: #333333;\"> Testing<\/b><\/span>\r\n\r\n<em><u>WCAG 2.1\r\n<\/u><\/em>\r\n\r\nIn 2020, Sabre started an initiative to ensure that all products and applications must adhere to the Digital Accessibility Policy and be compliant at the WCAG 2.1 level. A full automation of WCAG 2.1 is still not possible, but the team\u2019s idea was to get to 40-50% automation on Accessibility testing and integrate it as part of Continuous Deployment.\r\n\r\nThe team created a framework on Nodejs, Selenium utilizing Axe Browser Plugin, which is an open source accessibility testing widget. The framework developed works exactly how Lighthouse audits are automated and the CI tests will pass only if the page has <strong>zero<\/strong> critical, serious, moderate and minor issues.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1865 aligncenter\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-4.png\" alt=\"\" width=\"1282\" height=\"568\" \/>\r\n\r\nThe tests are scalable and a new page can be added easily, and can audit complex model pop-ups as well. The framework is reusable across UI apps too. The audit information data is also pushed to the central dashboard via API and the reports are made available in .csv format too.\r\n\r\n<span style=\"color: #808080;\"><strong>Executive Dashboard<\/strong><\/span>\r\n\r\nWhile automating, all the steps are indeed necessary to ensure that the feedback is obtained in the development cycle. It is equally important to have all the information available in a single dashboard that gives metrics of all microservices in a single pane. Such a dashboard was developed by the Central QA Team and in addition to providing the metrics at any given point of time, it also captures a trend of how different tests have fared sprint-over-sprint. This also gives the executive leadership an easy view of the overall product development quality, in just a few clicks.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1866\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-5.png\" alt=\"\" width=\"1509\" height=\"734\" \/>\r\n<blockquote>\r\n<h6 style=\"text-align: center;\"><em>Sonar Metrics for all Microservices over multiple sprints (left). Lighthouse\/Axe metrics for all pages<\/em><\/h6>\r\n<\/blockquote>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1867 aligncenter\" src=\"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Picture-6.png\" alt=\"\" width=\"1827\" height=\"898\" \/>\r\n<blockquote>\r\n<h6 style=\"text-align: center;\"><em>Regression Test Metrics for all Microservices over time (left). Defect metrics from JIRA\/Rally (Right)<\/em><\/h6>\r\n<\/blockquote>\r\n\r\n<hr \/>\r\n\r\n<h4><strong>The Impact<\/strong><\/h4>\r\nAt Sabre, teams are continuously looking modernizing systems and applications. In this context, having an end-to-end CI\/CD pipeline taking care of all UI aspects of testing is very much needed, and multiple scrum teams can benefit from reusing the solution described above. Having such automation capabilities available right at the beginning of a multi-year development project is very effective in getting early feedback and reducing the overall cost and manual efforts. In addition to all of these, having all of the various results available in a single dashboard provides the much-needed executive overview, right from the word go. This is now utilized by multiple teams in Tech transformation within Sabre and is helping them proactively make improvements.\r\n\r\n<hr \/>\r\n\r\n<strong>CREDITS:<\/strong>\r\n<ul>\r\n \t<li>Development – Rajesh Samal, Nitin Singla, Hemachandra Mutharasi<\/li>\r\n \t<li>Architecture overview – Suresh SG<\/li>\r\n \t<li>Central QA Team – Shalini Thillainathan, Koushik J, Gaurav Reddy<\/li>\r\n \t<li>Concept, Mindmap, and Engineering Leadership \u2013 Naveen K M<\/li>\r\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Agile development teams use Continuous Integration (CI) and Continuous Deployment (CD) to get quicker feedback and speed-up the development process. Fixing bugs early-on is cheaper than putting it off till it\u2019s too late. Typically, most tech companies have a robust pipeline available for backend services projects, and have built-in frameworks and tools that support CI\/CD pipeline for Java or .NET based backend services. This can be used by the development team off-the-shelf, with minimal configuration.<\/p>\n","protected":false},"featured_media":1871,"menu_order":0,"template":"templates\/template-hero-article-simple.php","format":[114],"categories":[145],"tags":[148,147,150,153,152,151,149,154],"searchby":[],"metadata":{"_edit_lock":["1621583802:52"],"_edit_last":["52"],"_thumbnail_id":["1871"],"_wp_page_template":["templates\/template-hero-article-simple.php"]},"featured_image":"https:\/\/www.sabre.com\/locations\/india\/wp\/wp-content\/uploads\/Naveen-Case-Study-720x415.png","_links":{"self":[{"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/resources\/1861"}],"collection":[{"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/resources"}],"about":[{"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/types\/resources"}],"version-history":[{"count":1,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/resources\/1861\/revisions"}],"predecessor-version":[{"id":1870,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/resources\/1861\/revisions\/1870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/media\/1871"}],"wp:attachment":[{"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/media?parent=1861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/categories?post=1861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/tags?post=1861"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/format?post=1861"},{"taxonomy":"searchby","embeddable":true,"href":"https:\/\/www.sabre.com\/locations\/india\/wp-json\/wp\/v2\/searchby?post=1861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}