Monday , June 21 2021

How to run head-end front-end tests with AWS Cloud9 and AWS CodeBuild



Automated testing is a key component of a well designed software development life cycle. When testing front-end applications, a browser is often used in conjunction with test frameworks. A headless browser is one that is used on a server that normally does not need to run visual applications. In this blog post, I'll show you how to configure AWS Cloud9 and AWS CodeBuild to support testing an Angular application with the headless version of Chrome. AWS Cloud9 has a deep integration with services like AWS Lambda and the environment is easily accessible anywhere, from any device connected to the Internet.

AWS Cloud9

By default, Cloud9 runs on an automatically managed Amazon EC2 instance. You can also run it on any Linux machine accessible via SSH.

First of all, create a Cloud9 environment.

  1. Log in to the AWS Management Console, scroll down to Development toolsand choose Cloud 9.
  2. On the following page, choose Create Environment.
  3. Enter a name for your environment and then choose Next step.
  4. On the next page, leave the default values ​​for now and click Next step.
  5. On the following page, choose Create Environment.

It may take a few minutes for the initialization of the environment. Behind the scenes, an EC2 instance is created for you in the region currently selected in the console. In the environment, press Alt-T to open a bash terminal board. For the remaining steps in this post, you will enter the commands in this tab.

There is a lot to do if this is the first time you use Cloud9. If you need help setting up or want to learn more, see the Cloud9 User Guide.

Install and set up Angular

The first thing we will do in our new environment is to install and configure an Angular application.

  1. Update Node to the latest version supported by AWS Lambda. (At the time of writing this, it is 8.10.)
    install nvm 8.10
  2. Install the angular CLI using npm, the node package manager. Install it as a global package with the -g option so that it is available for execution from anywhere in your environment.
    npm install -g @ angular / cli
  3. Use the angular CLI to create a corner application.
    new app mine
    cd my-app /
  4. Run the application to make sure everything works as expected. To view the preview of an application running in Cloud9, the app must be run on a specific port. With Angular, you must disable the default host header control.
    ng serve --port 8080 --host localhost --disable-host-check

    On the toolbar, next to To run, choose Preview and then choose Preview of the application running. You should see something like this:

  5. press Ctrl-C stop serving and then in the my-app directory, try to test your application.
    cd ..
    ng test --watch = false

    Obviously it does not work as you would expect on a normal workstation. The test framework can not find Chrome because we are working on a headless EC2 instance. To start tackling the problem, first install a package called Puppeteer as a development dependency in your application.

    I'd like to give credit here to Alex Bainter, a software developer who wrote a complete blog post to replace PhantomJS with Chromium and headless Karma. His post was extremely useful for me when I first had to figure it out.

  6. Install Puppeteer and his dependencies.
    npm i -D puppeteer
    npm i -D @ angular-devkit / build-angular
  7. You can take a look at the missing Chrome libraries by running the ldd command on the binary file provided with Puppeteer.
    cd node_modules / puppeteer / .local-chromium / linux-564778 / chrome-linux /

    (When you read this post, the version number on that path will probably be different puppeteer / .local-chrome directory to see what it is for the installation.)

    chrome ldd | not grep

    You should see an output that looks like this:

    libXcursor.so.1 => not found
    libXdamage.so.1 => not found
    libXfixes.so.3 => not found
    libcups.so.2 => not found
    libXss.so.1 => not found
    libXrandr.so.2 => not found
    libpangocairo-1.0.so.0 => not found
    libpango-1.0.so.0 => not found
    libcairo.so.2 => not found
    libatk-1.0.so.0 => not found
    libatk-bridge-2.0.so.0 => not found
    libgtk-3.so.0 => not found
    libgdk-3.so.0 => not found
    libgdk_pixbuf-2.0.so.0 => not found

Install Chrome without a head

Now comes the hard part. Installing headless Chrome on an Amazon Linux EC2 instance is not a simple operation. One strategy is to install the various dependencies by compiling from the source, but the dependency chain for Chrome, which includes gtk + and glib, soon escapes. I found another blogger who solved the problem by borrowing from the CentOS and Fedora package repositories. Thanks to Yuanyi for this part of the solution.

  1. Install yum packages to cover basic dependencies.
    sudo yum install -y libXcursor libXamage libcups libXss libXrandr 
    cups-libs dbus-glib libXinerama cairo cairo-gobject pango
  2. Borrow packages from CentOS and Fedora.
    sudo rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/atk-2.22.0-3.el7.x86_64.rpm
    sudo rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/at-spi2-atk-2.22.0-2.el7.x86_64.rpm
    sudo rpm -ivh --nodeps http://mirror.centos.org/centos/7/os/x86_64/Packages/at-spi2-core-2.22.0-1.el7.x86_64.rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/g/GConf2-3.2.6-7.fc20.x86_64 .rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libXScrnSaver-1.2.2-6.fc20.x86_64 .rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libxkbcommon-0.3.1-1.fc20.x86_64 .rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libwayland-client-1.2.0-3.fc20 .x86_64.rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/l/libwayland-cursor-1.2.0-3.fc20 .x86_64.rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/20/Fedora/x86_64/os/Packages/g/gtk3-3.10.4-1.fc20.x86_64 .rpm
    sudo rpm -ivh --nodeps http://dl.fedoraproject.org/pub/archive/fedora/linux/releases/16/Fedora/x86_64/os/Packages/gdk-pixbuf2-2.24.0-1.fc16.x86_64 .rpm
  3. change src / karma.conf.js request Puppeteer and set the CHROME_BIN environment variable. Here is the complete content of that file after the changes.
    const puppeteer = require ("puppeteer");
    process.env.CHROME_BIN = puppeteer.executablePath ();
    
    module.exports = function (config) {
    config.set ({
    basePath: & # 39; & # 39 ;,
    paintings: ['jasmine', ' @angular-devkit/build-angular'],
    plugins: [
                require('karma-jasmine'),
                require('karma-chrome-launcher'),
                require('karma-jasmine-html-reporter'),
                require('karma-coverage-istanbul-reporter'),
               require('@angular-devkit/build-angular/plugins/karma')
            ],
    customer:{
    clearContext: false // leaves the Jasmine Spec Runner output visible in the browser
    },
    coverageIstanbulReporter: {
    relationships: [ 'html', 'lcovonly' ],
    fixWebpackSourcePaths: true
    },
    angularCli: {
    environment: & # 39; dev & # 39;
    },
    to journalists: ['progress', 'kjhtml'],
    port: 8080,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browser: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
    ChromeHeadlessNoSandbox: {
    base: "ChromeHeadless",
    flags: ['--no-sandbox']
            }
    },
    singleRun: false
    
    });
    
    };
  4. Make a small change to the test specifications in src / app / app.component.spec.ts so that it is checking the title in the called test "should make the title in a h1 tag". To run ng test yet.
    ng test --watch = false

If you see that green SUCCESS indicator, then you did! You have installed Angular and created an application, installed Puppeteer and, by filling in the missing libraries for Chrome, you have made it possible to run headless Chrome tests in Cloud9!

AWS CodeBuild

The next piece of the puzzle is your CI / CD pipeline. When a developer checks the new code, you want to test that code with a continuous integration tool like AWS CodeBuild. With CodeBuild, the problem with Headless Chrome is slightly different from that with Cloud9, because the default build environment for Node apps is an Ubuntu image. You still need to install Chromium and its dependencies, but Ubuntu packages make it easier.

  1. Go to the CodeBuild console and create a new build project. Give it a name and configure the source repository. You will need to store the code for this exercise with one of the providers listed below so that CodeBuild knows where to find it when starting a build. Since you are already connected to the AWS console, AWS CodeCommit is a good option, but you could also choose Amazon S3, Bitbucket or GitHub.
  2. Configure the construction environment. For the operating system, select Ubuntu. For Runtime, choose Node.js. You can specify your own image of the build container, but the buildspec.yml described in step 3 works without the default image.
  3. For the construction specification, provide the following buildspec.yml files in the root directory of the source code repository.
    
    
    
    
    version: 0.2
    phases:
    to install:
    commands:
    
    # Install the angular CLI
    - npm install -g @ angular / cli
    
    # Install the puppeteer as a dependency on dev
    - npm puppeteer i -D
    - npm i -D @ angular-devkit / build-angular
    
    # Print the missing libraries
    - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | not grep
    
    # Update apt
    - apt-get update
    
    # Update libraries
    - apt-get update
    
    # Install apt-transport-https
    - apt-get install -y apt-transport-https
    
    # Use apt to install Chrome dependencies
    - apt-get install -y libxcursor1
    - apt-get install -y libgtk-3-dev
    - apt-get install -y libxss1
    - apt-get install -y libasound2
    - apt-get install -y libnspr4
    - apt-get install -y libnss3
    - apt-get install -y libx11-xcb1
    
    # Print the missing libraries
    - echo "Missing Libs" || ldd ./node_modules/puppeteer/.local-chromium/linux-549031/chrome-linux/chrome | not grep
    
    # Install project dependencies
    - Installation of npm
    
    pre_build:
    commands
    - echo "Nothing to pre_build"
    
    build:
    commands:
    
    - printenv
    
    # Build the project
    - ng build
    
    # Run headless Chrome tests
    - ng test --watch = false
    - printenv
    
    post_build:
    commands:
    
    - printenv
    
    # Distribute the project on S3
    
    - Self [ ${CODEBUILD_BUILD_SUCCEEDING}=1 ]; then aws s3 sync --delete dist / "s3: // $ {BUCKET_NAME}"; else echo "Ignore aws synchronization"; fi
    
    artifacts:
    File:
    - src / *
    
    

    Feel free to remove those ldd and printenv statements, but it's worth giving a look at the output to better understand what's going on with the build.

  4. Specify the path for artifacts. The following step is not required, but allows you to embed the build project in AWS CodePipeline.
  5. Expand Advanced Settings and configure an environment variable for the website's bucket name.
  6. Configure the buckets. CodeBuild can not write to S3 buckets unless you have explicit service permissions to do so. This is one of the most common causes of compilation errors for projects involving S3. Attach the following policy to the CodeBuild service role to allow access to these buckets. To choose Go on is To save to create the construction project, then log in to the IAM console and look for the role of the CodeBuild service just created for you. Add this as an online criterion.
    
    
    
    
    {
    "Version": "2012-10-17",
    "Declaration": [
    		{
    			"Sid": "VisualEditor0",
    			"Effect": "Allow",
    			"Action": "s3:*",
    			"Resource": [
    				"arn:aws:s3:::YOUR_BUCKET_FOR_ARTIFACTS",
    				"arn:aws:s3:::YOUR_BUCKET_FOR_ARTIFACTS /*"
    			]
    		},
    {
    "Sid": "VisualEditor1",
    "Effect": "Allow",
    "Action": "s3: *",
    "Resource": [
    				"arn:aws:s3:::YOUR_BUCKET_FOR_THE_WEBSITE",
    				"arn:aws:s3:::YOUR_BUCKET_FOR_THE_WEBSITE /*"
    			]
    		}
    ]}
    
    
  7. You should now be able to start compiling and see that the compiled website has been copied to your S3 bucket after completing the build.

Alternative installation of Cloud9 using SSH and Ubuntu

You can run Cloud9 IDE from a Linux computer you create, rather than letting Cloud9 take it over. Create a Cloud9 environment and choose Connect and run on the remote server. For more information on this type of configuration, see Creating an SSH Environment in the AWS Cloud9 User Guide.

After setting up the environment, the work you need to do is much simpler than the Amazon Linux instance, because there are Ubuntu packages that install the required dependencies. Follow the instructions above in this post up to the "Install Headless Chrome" section. Issue this command:

sudo apt install -y libxcursor1 libgtk-3-dev libxss1 libasound2 libnspr4 libnss3

It is not necessary to borrow from any of the CentOS or Fedora repositories.

Make changes to karma.conf.js as described above and you should then be ready to test your application.

Summary

You are now able to perform headless integration testing using Cloud9 by installing Puppeteer and filling up the required Chrome dependencies. You can also extend it to the image of the container used to test your application with CodeBuild. Automated tests are critical to a reliable DevOps pipeline and Cloud9 opens up new possibilities for developers of all types, including front-end developers.

Good programming! -EZB


Source link

89 comments

  1. fiat 500 replacement key

    Perfect piece of work you have done, this internet site is really cool with fantastic information.

  2. créditos online

    Necesita urgentemente un préstamo hipotecario o un gran préstamo de inversión, consulte nuestras listas de todas las ofertas de préstamos.

  3. A lot of thanks for all your efforts on this site. Gloria loves engaging in investigation and it’s really obvious why. Most of us learn all of the lively method you offer practical strategies through this web site and even increase participation from some other people on the issue so our favorite girl is in fact learning a lot of things. Take advantage of the rest of the year. You are always doing a really good job.

  4. fluvoxamine prices

    I happen to be writing to make you understand what a terrific experience our princess went through visiting yuor web blog. She realized such a lot of things, with the inclusion of what it is like to possess an incredible teaching style to make the others without hassle thoroughly grasp various tricky topics. You undoubtedly surpassed visitors’ expected results. Thanks for showing those valuable, trustworthy, revealing not to mention unique tips on your topic to Sandra.

  5. I am commenting to let you know of the fantastic encounter my cousin’s daughter experienced reading your site. She even learned many issues, not to mention what it’s like to have a wonderful giving mindset to have many people just grasp chosen grueling subject areas. You really exceeded our expectations. Many thanks for distributing the informative, healthy, educational and as well as easy thoughts on the topic to Jane.

  6. over the counter glaucoma drugs

    You got a very wonderful website, Sword lily I noticed it through google. https://glaucomamedi.com over the counter glaucoma drugs

  7. viagra from canada how much is viagra
    viagra from canada

  8. cheap ed pills from india buy ed pills from canada
    ed pills without a doctor prescription

  9. ed trial pack buy ed pills
    cheap ed pills usa

  10. india pharmacy: trusted india online pharmacies generic pills india

  11. all generic meds from india: india pharmacies shipping to usa online indian pharmacies

  12. india pharmacies online: order medications online from india buy prescriptions from india pharmacy

  13. top erectile dysfunction pills: https://edpillsonline24.com/# ed meds

  14. cialis ed pills: https://edpillsonline24.com/# ed pills

  15. cialis pills online: https://edpillsonline24.com/# ed pills for sale

  16. ed meds: https://edpillsonline24.com/# erectile pills canada

  17. viagra online usa: viagra online without prescription buy viagra online without prescription

  18. when will viagra be generic: viagra no prescription viagra without prescription

  19. amoxicillin tablet 500mg: generic amoxil – where can i buy amoxicillin without prec

  20. clomid 2020: clomid without prescription – generic for clomid

  21. order clomiphene: clomid – buy clomid online no prescription

  22. diflucan pill over the counter: diflucan – diflucan 750 mg

  23. https://metforminst.com/# metformin tab price

  24. australia price for valtrex: valacyclovir without a doctor’s prescription – valtrex medication for sale
    ventolin inhaler salbutamol

  25. cheap generic valtrex without prescription: valacyclovir without a doctor’s prescription – buy valtrex australia
    ventolin 90

  26. propecia finasteride: propecia tablets – buy propecia canada
    ventolin price in india

  27. buy finasteride: generic propecia – buy propecia online cheap
    can you buy ventolin over the counter in nz

  28. tadalafil generic cost: tadalafil generic cost – tadalafil generic cost
    ventolin cost uk

  29. ventolin from mexico to usa: ventolin inhalers for sale – ventolin no prescription
    ventolin 4mg tablet

  30. https://edpillst.com/# male ed pills
    erection pills viagra online

  31. http://edpillst.com/# cheap erectile dysfunction pills
    herbal ed treatment

  32. cialis online pharmacy erectile dysfunction medications – canadian online pharmacy no prescription
    pill pharmacy

  33. cheap pharmacy no prescription ed drugs – indian pharmacies safe
    save on pharmacy

  34. GO!!!
    This phrase was said by the first cosmonaut on Earth – Yuri Gagarin. (Yuri Gagarin)
    He was the first astronaut on Earth. He was Russian! …
    Now Russia is becoming a strong country, gas pipelines, a vaccine against COVID-19, an army.
    Is this very reminiscent of the communist Soviet Union?
    How do you think?
    Now we have total control in our country. I am interested in the opinion of foreigners.

    Албонумисматико

    ПОЕХАЛИ!!

  35. GO!!!
    This phrase was said by the first cosmonaut on Earth – Yuri Gagarin. (Yuri Gagarin)
    He was the first astronaut on Earth. He was Russian! …
    Now Russia is becoming a strong country, gas pipelines, a vaccine against COVID-19, an army.
    Is this very reminiscent of the communist Soviet Union?
    How do you think?
    Now we have total control in our country. I am interested in the opinion of foreigners.

    Албонумисматико

    ПОЕХАЛИ!!

  36. buy cialis online best price ed drugs – much does cialis cost without insurance
    buy cialis united kingdom

  37. cialis 20mg low price monthly cost of cialis without insurance – cialis in europe
    cialis 5mg tablet

  38. buy cheap cialis uk erectile dysfunction pills – cost of tadalafil without insurance
    buy cialis online best price

  39. buy cialis online generic cheapest generic cialis australia – buy cialis now
    buy cialis tadalafil tablets

  40. ordering cialis online australia buy cialis canadian – cialis without presciption in usa
    buy cialis very cheap prices fast delivery

  41. buy cialis online viagra erectile dysfunction medications – buy cialis online overnight
    cost of tadalafil without insurance

  42. canadian pharmacy cialis 20mg buy cialis philippines – buy cialis now
    buy cialis philippines

  43. how to get ciails without a doctor buy cheap cialis overnight – cialis sale 20mg
    original cialis low price

  44. cialis 20mg usa ed pills – cialis 20mg low price
    cialis online daily

  45. cost of viagra viagra prices – how long does viagra last
    buy viagra online without a prescription

  46. viagra prices ed pills that work better than viagra – viagra coupon
    over the counter alternative to viagra

  47. п»їover the counter viagra viagra without doctor prescription – viagra coupons
    viagra prices

  48. viagra side effects natural viagra – 100mg viagra without a doctor prescription
    viagra for sale

  49. safe buy cialis: buy cialis doctor buy cialis without perscription
    buy cialis online viagra

  50. buy cialis toronto: buy cialis 36 hour online buy cialis online overnight
    cialis online without prescription

  51. buy cialis online generic: how to buy cialis online from canada generic cialis canadian
    buy cheap cialis overnight

  52. cialis without presciption in usa: cialis original for sale buy cheap cialis overnight
    buy cialis tadalafil uk

  53. cialis 20 mg cost: buy cheap cialis overnight cialis tadalafil portugal
    cost of tadalafil without insurance

  54. buy doxycycline without prescription uk: cheap doxycycline – vibramycin 100 mg

  55. best ed pill: erectile dysfunction pills – how to cure ed

  56. buy ed pills: erectile dysfunction pills – new ed treatments

  57. cialis sale 20mg: buy cialis toronto buy cialis online cheap
    much does cialis cost without insurance

  58. buy cialis online europe: can i buy cialis in uk buy cialis online best price
    buy cialis canadian

  59. canada drug pharmacy: us online pharmacy – mail order pharmacy

  60. original cialis low price – cialis 20mg usa can i buy cialis in toronto

  61. buy cialis philippines – how to get ciails without a doctor buy cialis online in canada

  62. overseas online pharmacy: mexican pharmacy online – overseas online pharmacy

  63. buy cialis insurancecialis online without prescription buy cialis united kingdom how to buy cialis online from canada

  64. buy cialis online cheap buy cialis online overnight buy cialis insurancecialis online without prescription

  65. buy cialis online generic how to buy cialis online from canada buy cialis 36 hour online

  66. buy cialis online best price buy cialis tadalafil0 with pay pal generic cialis daily pricing

  67. where can u buy cialis buy cialis tadalafil0 with pay pal buy cialis with paypal

  68. canadian pharmacy cialis 20mg fastest delivery of generic cialis cialis 5mg tablet

  69. wellbutrin xl wellbutrin xl – wellbutrin no prescription

  70. valtrex without insurance valtrex – valtrex uk over the counter

  71. purchase wellbutrin wellbutrin xl – wellbutrin online prescription

  72. cheap wellbutrin sr wellbutrin xl – cheap wellbutrin xl

  73. wellbutrin cost wellbutrin xl – cheap wellbutrin sr

  74. amoxicillin 500mg pill buy amoxicillin online mexico – amoxicillin tablet 500mg

  75. amoxicillin 825 mg generic amoxil – amoxicillin canada price

  76. zyrtec for dogs allergies buy allegra in canada – where can i buy zyrtec in canada

  77. buy bactrim online without prescription doxycycline tablets – bactrim ds 800

  78. erectile dysfunction pills ed meds online without doctor prescription – herbal ed treatment

  79. best australian online pharmacy mail order pharmacy – promo code for canadian pharmacy meds

  80. mexican pharmacy online pharmacy no prescription – prices pharmacy

  81. ed clinics: ed meds online without doctor prescription canadian online drugstore

  82. male dysfunction pills: herbal ed buy online pharmacy

  83. over the counter viagra – order viagra online best over the counter viagra

  84. viagra amazon – when will viagra be generic buy generic 100mg viagra online

  85. buy generic neurontin online neurontin – how to get neurontin

  86. how to order doxycycline buy doxycycline online – buy doxycycline hyclate 100mg without a rx

  87. generic for doxycycline buy doxycycline online – where to get doxycycline

  88. aralen generic aralen – order chloroquine phosphate

Leave a Reply

Your email address will not be published.