{"id":486,"date":"2021-09-28T23:05:33","date_gmt":"2021-09-28T23:05:33","guid":{"rendered":"https:\/\/erikscode.space\/?p=486"},"modified":"2021-09-28T23:05:38","modified_gmt":"2021-09-28T23:05:38","slug":"improving-browser-automation-tests-how-to-add-microsoft-edge-and-edgedriver-to-linux-ci-systems","status":"publish","type":"post","link":"https:\/\/erikscode.space\/index.php\/2021\/09\/28\/improving-browser-automation-tests-how-to-add-microsoft-edge-and-edgedriver-to-linux-ci-systems\/","title":{"rendered":"Improving Browser Automation Tests: How to Add Microsoft Edge and Edgedriver to Linux CI Systems"},"content":{"rendered":"\n<p>Lately, the Microsoft Edge browser has been growing in popularity, recently unseating Firefox as the 3rd most popular web browser and approaching Safari in the number two spot. This means that any web application with a potentially wide user base should include MS Edge tests in its automated test suite. Setting this up to run automatically, particularly in *nix based CI servers, can be quite a hassle when compared to setting up Chrome and Firefox browser tests. In this article, I&#8217;ll show you the steps to get the Edge browser and web driver running in a Linux-like CI system.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Why should I run tests in multiple browsers<\/h2>\n\n\n\n<p>If you write web applications, you may only ever test them in the browser of your choice. For example, I use Chrome almost exclusively, and when I write new features for an application, I never really check and see if those features work the same in Firefox, Safari, Edge, or anything else.<\/p>\n\n\n\n<p>For the most part, you can get away with this, but each browser is a little different and if you&#8217;re only testing through one browser, you only know how your web apps look and behave for people using that browser. There are subtle differences between browsers and I&#8217;ve received reports of browser-specific bugs from users before that I could&#8217;ve caught if I&#8217;d just verified my app through something other than Chrome.<\/p>\n\n\n\n<p>Likewise, you should probably add some variety to your automated test suite and not rely solely on Chrome and Chromedriver for your web-based automated tests. I&#8217;m not saying you need to run every feature test in each major browser (though you certainly could) but any test that interacts with or verifies the status or behavior of: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The UI<\/li><li>Cookies<\/li><li>Session data<\/li><\/ul>\n\n\n\n<p>should be tested in at least two popular browsers. These things have the most variability between different browsers, so it&#8217;s good practice to verify these attributes with multiple browsers and web drivers. <\/p>\n\n\n\n<p>Now that we know why we want to test features with multiple browsers, let&#8217;s get to the main point of this article: running automated browser tests with Microsoft Edge and Edgedriver.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Edge-Specific Challenges<\/h2>\n\n\n\n<p>The reason an article like this is needed is because most CI pipelines run in Linux-like environments, and Microsoft Edge isn&#8217;t really &#8220;native&#8221; to this operating system. Additionally, many popular CI systems (like CircleCI, TravisCI, GitHub Actions) don&#8217;t have out-of-the-box support for Edge and Edgedriver like they do for Chrome and Chromedriver or Firefox and Geckodriver.<\/p>\n\n\n\n<p>Therefore, we have to add some specific steps in our build files, which we&#8217;ll go over in the next section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add MS Edge and Edge Driver to Server<\/h2>\n\n\n\n<p>Our general strategy moving forward will be like so:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Install Microsoft GPG<\/li><li>Add MS Edge &#8220;dev&#8221; distro to sources list<\/li><li>Install the development version of MS Edge (the browser)<\/li><li>In the development version of Edgedriver (the Edge-specific web driver)<\/li><li>Make the driver accessible to the OS<\/li><\/ol>\n\n\n\n<p>Before I show you the script, there&#8217;s one more thing you need: the current Edgedriver development version. We&#8217;re going to save ourselves some work by only using the stable dev version of the Edge browser, which we can do by simply specifying &#8220;stable&#8221; in our script (which you&#8217;ll see in a moment) but there is no such easy way to get the latest stable Edgedriver. That&#8217;s why we need to go find the specific version.<\/p>\n\n\n\n<p>To get the version number, go to <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-edge\/tools\/webdriver\/\" target=\"_blank\">this page<\/a> and look at the version number under &#8220;Dev.&#8221; As of writing this, the number says 95.0.1020.5. We&#8217;ll use this number inside of a URL in our build script. Finally, the script will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>curl https:\/\/packages.microsoft.com\/keys\/microsoft.asc | gpg --dearmor > microsoft.gpg\r\nsudo install -o root -g root -m 644 microsoft.gpg \/etc\/apt\/trusted.gpg.d\/\r\nsudo sh -c 'echo \"deb &#91;arch=amd64] https:\/\/packages.microsoft.com\/repos\/edge stable main\" > \/etc\/apt\/sources.list.d\/microsoft-edge-dev.list'\r\nsudo rm microsoft.gpg\r\nsudo apt update\r\nsudo apt install microsoft-edge-dev\r\nwget https:\/\/msedgedriver.azureedge.net\/95.0.1020.5\/edgedriver_linux64.zip -P ~\/\r\nunzip ~\/edgedriver_linux64.zip -d ~\/\r\nrm ~\/edgedriver_linux64.zip\r\nsudo mv -f ~\/msedgedriver \/usr\/local\/share\/\r\nsudo chmod 777 \/usr\/local\/share\/msedgedriver\r\nsudo ln -s \/usr\/local\/share\/msedgedriver \/usr\/local\/bin\/msedgedriver<\/code><\/pre>\n\n\n\n<p>This script is currently a build step for a personal project of mine and is working fine in GitHub Actions. If you&#8217;re using a different CI, the exact syntax of how to lay out the different commands may be different, but the actual commands and their order are correct regardless of CI tool.<\/p>\n\n\n\n<p>Notice in the <code>wget<\/code> command, we have the Edge driver version number in the URL and we&#8217;ve specified that we&#8217;re using the 64 bit Linux build. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Issues with Local vs Remote Driver<\/h2>\n\n\n\n<p>There is one issue I was running into when trying to run my tests in a remote CI server. I don&#8217;t remember the specifics of the issue, nor do I know if it will be the same in all Selenium ports (I use Python) but basically the issue is this: When you&#8217;re using the dev version of the browser and driver for edge, you have to tell Selenium you&#8217;re doing so or the tests will not find the driver.<\/p>\n\n\n\n<p>My approach to fixing this issue is to set an environment variable in the CI script such as <code>RUNNING_IN_CI=True<\/code> or something similar and then check for that variable in the test. If it&#8217;s not there, that means I&#8217;m running tests locally and I don&#8217;t need to specify that I&#8217;m using the dev version. If that variable is present however, I need to set the following values (this is specific to LuluTest browser automation framework, but your implementation of Selenium will likely be similar):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>options_hash = BrowserOptions({\n    'driver_type': browser,\n    'headless': True,\n    'browser_binary_location': shutil.which('microsoft-edge-dev'),\n    'webdriver_location': shutil.which('msedgedriver'),\n    'operating_system': 'LINUX'\n})<\/code><\/pre>\n\n\n\n<p>Here I&#8217;m using Python&#8217;s <code>shutil<\/code> library to find the path of Microsoft Edge and Edgedriver in the CI system, as well as some other housekeeping things. This is necessary if you&#8217;ve used a build script like mine above.<\/p>\n\n\n\n<p>That should do it!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Join my OSS Browser Automation Project!<\/h2>\n\n\n\n<p>Thanks for reading this article, I hope it helped you. If you like browser automation and open-source software, consider checking out my OSS project <a href=\"https:\/\/github.com\/erik-whiting\/LuluTest\">LuluTest<\/a> and adding some contributions. I&#8217;m looking for developers, testers, and writers alike! I&#8217;ve tried to make the project as beginner friendly and inclusive as possible so with #hacktoberfest 2021 coming up, maybe you can knock out some of your PRs with me.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lately, the Microsoft Edge browser has been growing in popularity, recently unseating Firefox as the 3rd most popular web browser and approaching Safari in the number two spot. This means that any web application with a potentially wide user base should include MS Edge tests in its automated test suite. Setting this up to run&#8230;<\/p>\n","protected":false},"author":1,"featured_media":488,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[44,17],"tags":[53,49,52,54,19,10],"class_list":["post-486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-svc-ci-cd-and-more","category-testing","tag-browser-automation","tag-ci-cd","tag-continuous-integration","tag-hacktoberfest","tag-test-automation","tag-testing"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/09\/pexels-joagbriel-1753922.jpg?fit=%2C&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pb90KY-7Q","jetpack-related-posts":[{"id":109,"url":"https:\/\/erikscode.space\/index.php\/2019\/09\/27\/getting-started-with-browser-automation-testing-in-python\/","url_meta":{"origin":486,"position":0},"title":"Getting Started With Browser Automation Testing in Python","author":"erik","date":"September 27, 2019","format":false,"excerpt":"Developers have unit tests to test atomic functionality and integration tests to test system interoperability. Web developers have to take it a step further and test actual browser behavior. This can be done in many ways, but most often it's with some implementation of Selenium webdriver and an xUnit testing\u2026","rel":"","context":"In &quot;Testing&quot;","block_context":{"text":"Testing","link":"https:\/\/erikscode.space\/index.php\/category\/testing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":1559,"url":"https:\/\/erikscode.space\/index.php\/2023\/09\/16\/test-driven-development-with-python-a-primer\/","url_meta":{"origin":486,"position":1},"title":"Test-Driven Development with Python: a Primer","author":"erik","date":"September 16, 2023","format":false,"excerpt":"Making sure the software we build works the way we (and our customers) want it to work is called, unsurprisingly, software testing. Software testing is an enormous topic; indeed, there are entire books, courses, conferences, academic journals, and more about the topic. One can even make a career out of\u2026","rel":"","context":"In &quot;Python&quot;","block_context":{"text":"Python","link":"https:\/\/erikscode.space\/index.php\/category\/language-specific\/python\/"},"img":{"alt_text":"brown python","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2023\/09\/snake-ball-python-python-regius-beauty-53140.jpeg?fit=1200%2C827&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2023\/09\/snake-ball-python-python-regius-beauty-53140.jpeg?fit=1200%2C827&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2023\/09\/snake-ball-python-python-regius-beauty-53140.jpeg?fit=1200%2C827&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2023\/09\/snake-ball-python-python-regius-beauty-53140.jpeg?fit=1200%2C827&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2023\/09\/snake-ball-python-python-regius-beauty-53140.jpeg?fit=1200%2C827&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":126,"url":"https:\/\/erikscode.space\/index.php\/2019\/10\/14\/example-tdd-workflows\/","url_meta":{"origin":486,"position":2},"title":"Example TDD Workflows","author":"erik","date":"October 14, 2019","format":false,"excerpt":"This article isn't designed to sell you on the benefits of TDD, it is simply a tutorial (in Java and JUnit) to get you acclimated to the typical workflow. TDD can be counter-intuitive, so we'll go slow and keep it simple. Test Driven Development, or TDD, is a development process\u2026","rel":"","context":"In &quot;Testing&quot;","block_context":{"text":"Testing","link":"https:\/\/erikscode.space\/index.php\/category\/testing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/10\/TDDCycle.jpg?fit=833%2C654&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/10\/TDDCycle.jpg?fit=833%2C654&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/10\/TDDCycle.jpg?fit=833%2C654&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/10\/TDDCycle.jpg?fit=833%2C654&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":389,"url":"https:\/\/erikscode.space\/index.php\/2021\/04\/05\/professional-version-control-with-git-pt-2-collaboration\/","url_meta":{"origin":486,"position":3},"title":"Professional Version Control with Git: Pt 2 &#8211; Collaboration","author":"erik","date":"April 5, 2021","format":false,"excerpt":"Welcome back, this article is part 2 of Erik's Code Space's series on professional version control with Git. In part one, we learned about the basics of making commits, branching, and merging. In this section, we're going to learn about the collaboration tools available to us with Git through GitHub.\u2026","rel":"","context":"In &quot;SVC, CI\/CD, and More&quot;","block_context":{"text":"SVC, CI\/CD, and More","link":"https:\/\/erikscode.space\/index.php\/category\/svc-ci-cd-and-more\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-dio-hasbi-saniskoro-3280130-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-dio-hasbi-saniskoro-3280130-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-dio-hasbi-saniskoro-3280130-scaled.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-dio-hasbi-saniskoro-3280130-scaled.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-dio-hasbi-saniskoro-3280130-scaled.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2410,"url":"https:\/\/erikscode.space\/index.php\/2024\/10\/17\/how-to-start-contributing-to-an-open-source-software\/","url_meta":{"origin":486,"position":4},"title":"How to Start Contributing to Open Source Software","author":"erik","date":"October 17, 2024","format":false,"excerpt":"Getting started if you are completely new. I am pretty open with my enthusiasm for open-source software (OSS) and, as a result, often receive questions from others on how they can get started contributing to projects. I've received enough questions to notice some trends in where people are starting from\u2026","rel":"","context":"In &quot;Learning&quot;","block_context":{"text":"Learning","link":"https:\/\/erikscode.space\/index.php\/category\/learning\/"},"img":{"alt_text":"person holding a black and white paper with message","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/10\/pexels-photo-11035544.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/10\/pexels-photo-11035544.jpeg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/10\/pexels-photo-11035544.jpeg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/10\/pexels-photo-11035544.jpeg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/10\/pexels-photo-11035544.jpeg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3341,"url":"https:\/\/erikscode.space\/index.php\/2026\/04\/18\/how-to-create-a-sparkly-spoiler-effect-like-the-one-in-threads-mobile-app\/","url_meta":{"origin":486,"position":5},"title":"How to Create a Sparkly-Spoiler Effect like the one in Threads Mobile App","author":"erik","date":"April 18, 2026","format":false,"excerpt":"If you use Meta's Threads app on a mobile device, you may have noticed an interesting effect: the spoiler tag that hides text behind a sparkly veil. In this article, I will show you how to implement this effect in the browser using HTML, CSS, and JavaScript. NOTE: You can\u2026","rel":"","context":"In &quot;Web Development&quot;","block_context":{"text":"Web Development","link":"https:\/\/erikscode.space\/index.php\/category\/web-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=1200%2C795&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=1200%2C795&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=1200%2C795&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=1200%2C795&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=1200%2C795&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":0,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/media\/488"}],"wp:attachment":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}