mwaz / applifashion Goto Github PK

Applitools is the proud sponsor of this hackathon

Click Here to view Eyes Hackathon Batch Results

Applitools Ultrafast grid is the easiest and quickest way to carry out automated visual testing when it comes to frontend applications.

Applitools Ultrafast grid is designed to run on all major browsers inclusing Chrome, Firefox, Safari, Edge, I.E and among other browsers. Applitools ultrafast grid allows one to also run their tests through different mobile user interfaces and this is done by resizing browsers in different viewports. The main advantage of the Ultrafast grid is that with a single test you can be able to run tests in all the possible combinations of browsers supported. Ultrafast grid is super fast as the test runs are concurrent and they run in the cloud which would not be how they would normally run in the local machines.

1. NodeJs
2. Cypress
3. Javascript
4. Eyes SDK

Below is an applitools browsers configuration of all the browsers that the eyes SDK will use to run the tests and an iphone-X mobile device emulation that will use a resized version of Google's Chrome browser.

Configuration: Browser Configuration on Applitools Ultrafast Grid with eyes SDK

   browser: [
        // configuration of different viewports
        {width: 1200, height: 700, name: 'chrome'},
        {width: 1200, height: 700, name: 'firefox'},
        {width: 1200, height: 700, name: 'edgechromium'},
        {width: 768, height: 700, name: 'chrome'},
        {width: 768, height: 700, name: 'firefox'},
        {width: 768, height: 700, name: 'edgechromium'},
        {deviceName: 'iPhone X', screenOrientation: 'portrait'},
    ],

beforeEach(() => {
        cy.viewport(800, 600);
        cy.eyesOpen(browser);
    });

1. Download Node from the official website or with brew

   • $ brew install node

2. Clone the github repository

   • $ git clone [email protected]:mwaz/AppliFashion.git

3. Install packages with npm package manager

   • $ cd /cloned/project/folder
   • $ npm install

4. Add the API-KEY provided by Applitools eyes to the applitools.config.js file as shown below.

module.exports = {
    ...
    apiKey: 'YOUR-API-KEY-HERE',
    ...
}

test:ultragrid:v1

test:ultragrid:v2

View the UltraGrid Eyes Hackathon Batch Results Here

test:chrome:v1

test:firefox:v1

test:edge:v1

test:chrome:v2

test:firefox:v2

test:edge:v2

1. Applitools.config.js file

   Applitools eyes Ultrafast grid can be configured using the applitools.config.js file that should live in the root of the tests directory. A sample configuration to run the tests looks as shown below

   module.exports = {
   concurrency: 10,
   apiKey: 'YOUR-API-KEY',
   browser: [
        // {Viewport dimensions, name of browser}
       {width: 1200, height: 700, name: 'chrome'},
       {deviceName: 'iPhone X', screenOrientation: 'portrait'},
   ],
   // configuration batch name
   batchName: 'UFG Hackathon',
   appName: 'applifashion-hackathon',
   showLogs: true,
   }
   

2. cy.eyesOpen({configuration})

   Eyes SDK can also be configured on the cy.eyesOpen command for Eyes SDK. Using the command, a user can override the test defaults configured on the applitools.config.js or even extend the configurations for specific tests.

1. Clone repo and create a new branch: $ git checkout https://github.com/mwaz/applifashion -b name_for_new_branch.
2. Make changes and test
3. Submit Pull Request with comprehensive description of changes

• @cypress for cypress documentation.
• Applitools Eyes SDK for best practices on using the SDK.

This is free, open-source software. If you'd like to support the development of future projects, or say thanks for this one, you can buy me a coffee