All Projects → galenframework → Galen

galenframework / Galen

Licence: apache-2.0
Layout and functional testing framework for websites

Programming Languages

javascript
184084 projects - #8 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to Galen

Gaintime
GainTime é um framework de HTML, CSS e JS para desenvolvimento de projetos responsivos, focado na simplicidade.
Stars: ✭ 19 (-98.64%)
Mutual labels:  responsive-design
Flutter Responsive Email Ui Mobile Tablet And Web
We redesign the outlook app also make it responsive so that you can run it everywhere on your phone, tab, or web.
Stars: ✭ 1,138 (-18.36%)
Mutual labels:  responsive-design
Vue Responsive
A plugin for responsive handling with vue.js
Stars: ✭ 86 (-93.83%)
Mutual labels:  responsive-design
Responsive Menu Ant Design
A simple implementation of responsive navigation for Ant Design.
Stars: ✭ 28 (-97.99%)
Mutual labels:  responsive-design
Image Resizer
On-the-fly image resizing using Node.js and libvips. Heroku Ready!
Stars: ✭ 59 (-95.77%)
Mutual labels:  responsive-design
Angular Responsive Tables
Make your HTML tables look great on every device
Stars: ✭ 69 (-95.05%)
Mutual labels:  responsive-design
Verge
Get viewport dimensions, detect elements in the viewport
Stars: ✭ 687 (-50.72%)
Mutual labels:  responsive-design
Tachyons Verbose
Functional CSS for humans. Verbose edition.
Stars: ✭ 102 (-92.68%)
Mutual labels:  responsive-design
Responsive led control
Responsive Led Control based on McLightning & Grisworld-Led-Controller with FastLED
Stars: ✭ 62 (-95.55%)
Mutual labels:  responsive-design
Blogophonic Hugo
Blogophonic – a Hugo blog theme by Formspree
Stars: ✭ 80 (-94.26%)
Mutual labels:  responsive-design
Devgonga
Devgonga é uma startup com foco em criação de sites e desenvolvimento de sistemas web, moldada para atender a pequenas e médias empresas ao redor de angola. https://devgonga.github.io/devgonga/
Stars: ✭ 41 (-97.06%)
Mutual labels:  responsive-design
My Portfolio
Responsive design built with Flutter Web.
Stars: ✭ 49 (-96.48%)
Mutual labels:  responsive-design
Flutterwebsite
The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite
Stars: ✭ 76 (-94.55%)
Mutual labels:  responsive-design
Angular Asp.netcorewebapi Mysql Crud Project
Angular 5 + ASP.Net Core 2.0 WebAPI + MySQL CRUD Sample
Stars: ✭ 22 (-98.42%)
Mutual labels:  responsive-design
Buddycss
The framework for people who love coding!
Stars: ✭ 89 (-93.62%)
Mutual labels:  responsive-design
Material Dashboard Angular2
Material Dashboard Angular
Stars: ✭ 814 (-41.61%)
Mutual labels:  responsive-design
Booking Management Dashboard
flutter Booking Management Dashboard responsive (web,mobile,tablet)
Stars: ✭ 69 (-95.05%)
Mutual labels:  responsive-design
Responsive Portfolio
This is a Responsive Portfolio Website made with Love and Javascript; FEEL FREE TO COPY; NO COPYRIGHT ISSUE, in case of error ping me. Do follow me on github and star the repo
Stars: ✭ 104 (-92.54%)
Mutual labels:  responsive-design
Doorstep
The powerful e-commerce solution for Python
Stars: ✭ 88 (-93.69%)
Mutual labels:  responsive-design
Easygrid
EasyGrid - VanillaJS Responsive Grid
Stars: ✭ 77 (-94.48%)
Mutual labels:  responsive-design

Galen Framework

master: Build Status

Galen is an open-source tool for testing layout and responsive design of web applications. It is also a powerfull functional testing framework. For more information visit http://galenframework.com

How does it work?

Galen Framework uses Selenium in order to open web browser and select the tested elements on page. It has a special language to describe the layout of web page for different browser sizes. You just need to define your own tags for devices and sizes and then using the galen spec language write checks for each element on page. The best way to test the layout is to check location and dimensions of elements relatively to each other. Here is a small example of basic syntax.

@objects
    header                  id  header
    menu                    css #menu
    content                 id  content
    side-panel              id  side-panel
    footer                  id  footer

= Main section =
    @on *
        header:
            inside screen 0px top, 0px left, 0px right

        menu:
            inside screen 0px left right
            below header 0px

        content:
            below menu 0px
            inside screen 0px left

    @on desktop
        side-panel:
            below menu 0px
            inside screen 0px right
            width 300px
            near content 0px right

    @on mobile
        content, side-panel:
            width 100% of screen/width

        side-panel:
            below content 0px

And here is a more advanced spec:

# example of using custom rules (functions)

@set userMargin 5 to 10 px

@objects
    user-*      div.users-list .user

@rule %{pattern} are below each other by %{distance} and aligned
    @forEach [pattern] as object, prev as prevObject
        ${object}:
            below ${prevObject} ${distance}
            aligned vertically all ${prevObject}

= Checking all users =
    | user-* are below each other by ${userMargin} and aligned

Conditional statements:

@objects
    banner-container    #banner-container

= Banner section =
    @if ${isVisible("banner-container")}
        banner-container:
            image file imgs/banner.png, error 5%

For more information please read Galen Framework Documentation

Contributing

If you want to contribute to this project just look for current open issues. Please let know in the comments of the issue that you are going to pick it up because somebody could already work on it. In the end just send the pull request. By the way the feature that you are going to work on should not just solve your particular problem. It should be extendable and configurable. The github issues is the best place to debate on the feature and discuss how it should be implemented.

All the work on the next version is performed in corresponding release branch (e.g. release-2.5). The master branch reflects the current live version. Most of the pull requests are accepted on release branch and not on master.

If you would like to make a change to the Galen Framework website (http://galenframework.com) you can do it here https://github.com/galenframework/galenframework.com

Add GPG key to your maven settings.xml:

      <properties>
          <gpg.keyname>C78F3CC4</gpg.keyname>
          <gpg.passphrase>Password</gpg.passphrase>
          ...

Setup the dependencies mvn clean install

The test can be run via mvn verify

To run integrations tests against chrome:

mvn clean verify -Dwebdriver.chrome.driver=/opt/dev/chromedriver -Dselenium.browser=chrome

Please ensure that you downloaded chromedriver, see here

Also you need Maven 3.3 or greater and Node with some modules:

  • sudo npm install -g grunt-cli
  • sudo npm install -g bower

Building

This project is based on Maven. You can use both Intellij or Eclipse for it. It is being developed in Linux so all the assembling scripts are in bash. In order to assemble the dist with zip archives just run ./makeDist.sh and it will create a dist folder with both binary and source folders and it will prepare zip archives there as well. If you want to quickly test the concept and install galen right after the assembling you can use script ./assembleAndInstall.sh. It uses makeDist.sh and then just invokes sudo ./install.sh

Testing

There are two levels of testing. The first one is just the regular mvn clean test. But as there is a lot of Javascript code - you need Mocha. The tests are located in folder src/test/js/. To run the just go to that folder and execute testJs.sh

License

Galen Framework is licensed under Apache License, Version 2.0

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].