diff --git a/app/code/Magento/Catalog/Block/Product/AbstractProduct.php b/app/code/Magento/Catalog/Block/Product/AbstractProduct.php
index d9702c5073fb6..f1bb89d4424f7 100644
--- a/app/code/Magento/Catalog/Block/Product/AbstractProduct.php
+++ b/app/code/Magento/Catalog/Block/Product/AbstractProduct.php
@@ -124,7 +124,7 @@ public function __construct(\Magento\Catalog\Block\Product\Context $context, arr
      */
     public function getAddToCartUrl($product, $additional = [])
     {
-        if ($product->getTypeInstance()->hasRequiredOptions($product)) {
+        if (!$product->getTypeInstance()->isPossibleBuyFromList($product)) {
             if (!isset($additional['_escape'])) {
                 $additional['_escape'] = true;
             }
diff --git a/app/code/Magento/Catalog/Model/Product/Type/AbstractType.php b/app/code/Magento/Catalog/Model/Product/Type/AbstractType.php
index acf67af8cc1dc..a157201250373 100644
--- a/app/code/Magento/Catalog/Model/Product/Type/AbstractType.php
+++ b/app/code/Magento/Catalog/Model/Product/Type/AbstractType.php
@@ -1070,4 +1070,15 @@ public function getAssociatedProducts($product)
     {
         return [];
     }
+
+    /**
+     * Check if product can be potentially buyed from the category page or some other list.
+     *
+     * @param \Magento\Catalog\Model\Product $product
+     * @return bool
+     */
+    public function isPossibleBuyFromList($product)
+    {
+        return !$this->hasRequiredOptions($product);
+    }
 }
diff --git a/app/code/Magento/Catalog/Test/Unit/Block/Product/ListProductTest.php b/app/code/Magento/Catalog/Test/Unit/Block/Product/ListProductTest.php
index 2a13107546600..d53ec1f2c0bf7 100644
--- a/app/code/Magento/Catalog/Test/Unit/Block/Product/ListProductTest.php
+++ b/app/code/Magento/Catalog/Test/Unit/Block/Product/ListProductTest.php
@@ -148,9 +148,9 @@ public function testGetAddToCartPostParams()
         ];
 
         $this->typeInstanceMock->expects($this->once())
-            ->method('hasRequiredOptions')
+            ->method('isPossibleBuyFromList')
             ->with($this->equalTo($this->productMock))
-            ->will($this->returnValue(false));
+            ->will($this->returnValue(true));
         $this->cartHelperMock->expects($this->any())
             ->method('getAddUrl')
             ->with($this->equalTo($this->productMock), $this->equalTo([]))
diff --git a/app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js b/app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js
index ec9b0a87ff671..b46dd1f979c99 100644
--- a/app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js
+++ b/app/code/Magento/Catalog/view/frontend/web/js/catalog-add-to-cart.js
@@ -75,6 +75,18 @@ define([
                     }
 
                     if (res.backUrl) {
+                        var eventData = {
+                            'form': form,
+                            'redirectParameters': []
+                        };
+
+                        // trigger global event, so other modules will be able add parameters to redirect url
+                        $('body').trigger('catalogCategoryAddToCartRedirect', eventData);
+                        if (eventData.redirectParameters.length > 0) {
+                            var parameters = res.backUrl.split('#');
+                            parameters.push(eventData.redirectParameters.join('&'));
+                            res.backUrl = parameters.join('#');
+                        }
                         window.location = res.backUrl;
                         return;
                     }
@@ -120,4 +132,4 @@ define([
     });
 
     return $.mage.catalogAddToCart;
-});
\ No newline at end of file
+});
diff --git a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
index 17cda65d76da2..def56ee664de8 100644
--- a/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
+++ b/app/code/Magento/ConfigurableProduct/Model/Product/Type/Configurable.php
@@ -1185,4 +1185,23 @@ public function setImageFromChildProduct(\Magento\Catalog\Model\Product $product
         }
         return parent::setImageFromChildProduct($product);
     }
+
+    /**
+     * @inheritdoc
+     */
+    public function isPossibleBuyFromList($product)
+    {
+        $isAllCustomOptionsDisplayed = true;
+
+        foreach ($this->getConfigurableAttributes($product) as $attribute) {
+            $eavAttribute = $attribute->getProductAttribute();
+
+            $isAllCustomOptionsDisplayed = (
+                $isAllCustomOptionsDisplayed
+                && $eavAttribute->getData('used_in_product_listing')
+            );
+        }
+
+        return $isAllCustomOptionsDisplayed;
+    }
 }
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
index d1c2002ac0275..8924e960e3c78 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml
@@ -7,7 +7,7 @@
 <?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
 <div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
 <script>
-    require(["jquery", "jquery/ui", "Magento_Swatches/js/swatchRenderer"], function ($) {
+    require(["jquery", "jquery/ui", "Magento_Swatches/js/SwatchRenderer", "Magento_Swatches/js/catalog-add-to-cart"], function ($) {
         $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
             selectorProduct: '.product-item-details',
             onlySwatches: true,
diff --git a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
index e231a89824ccd..5315e3179d180 100644
--- a/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
+++ b/app/code/Magento/Swatches/view/frontend/templates/product/view/renderer.phtml
@@ -10,7 +10,7 @@
 <script type="text/x-magento-init">
     {
         "[data-role=swatch-options]": {
-            "Magento_Swatches/js/swatchRenderer": {
+            "Magento_Swatches/js/SwatchRenderer": {
                 "jsonConfig": <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>,
                 "jsonSwatchConfig": <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
                 "mediaCallback": "<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>"
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
index 9859a3c74236a..61e34736e30c6 100644
--- a/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
+++ b/app/code/Magento/Swatches/view/frontend/web/js/SwatchRenderer.js
@@ -3,32 +3,59 @@
  * See COPYING.txt for license details.
  */
 
-define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
+define([
+    'jquery',
+    'underscore',
+    'mage/smart-keyboard-handler',
+    'jquery/ui',
+    'jquery/jquery.parsequery',
+    'mage/validation/validation'
+], function ($, _, keyboardHandler) {
     'use strict';
 
     /**
-     * Parse params
-     * @param {String} query
-     * @returns {{}}
+     * Extend form validation to support swatch accessibility
      */
-    $.parseParams = function (query) {
-        var re = /([^&=]+)=?([^&]*)/g,
-            decodeRE = /\+/g,  // Regex for replacing addition symbol with a space
-            decode = function (str) {
-                return decodeURIComponent(str.replace(decodeRE, " "));
-            },
-            params = {}, e;
+    $.widget('mage.validation', $.mage.validation, {
+        /**
+         * Handle form with swatches validation. Focus on first invalid swatch block.
+         *
+         * @param {jQuery.Event} event
+         * @param {Object} validation
+         */
+        listenFormValidateHandler: function (event, validation) {
+            var swatchWrapper, firstActive, swatches, swatch, successList, errorList, firstSwatch;
+
+            this._superApply(arguments);
+
+            swatchWrapper = '.swatch-attribute-options';
+            swatches = $(event.target).find(swatchWrapper);
+
+            if (!swatches.length) {
+                return;
+            }
+
+            swatch = '.swatch-attribute';
+            firstActive = $(validation.errorList[0].element || []);
+            successList = validation.successList;
+            errorList = validation.errorList;
+            firstSwatch = $(firstActive).parent(swatch).find(swatchWrapper);
 
-        while (e = re.exec(query)) {
-            var k = decode(e[1]), v = decode(e[2]);
-            if (k.substring(k.length - 2) === '[]') {
-                k = k.substring(0, k.length - 2);
-                (params[k] || (params[k] = [])).push(v);
+            keyboardHandler.focus(swatches);
+
+            $.each(successList, function (index, item) {
+                $(item).parent(swatch).find(swatchWrapper).attr('aria-invalid', false);
+            });
+
+            $.each(errorList, function (index, item) {
+                $(item.element).parent(swatch).find(swatchWrapper).attr('aria-invalid', true);
+            });
+
+            if (firstSwatch.length) {
+                $(firstSwatch).focus();
             }
-            else params[k] = v;
         }
-        return params;
-    };
+    });
 
     /**
      * Render tooltips by attributes (only to up).
@@ -38,10 +65,10 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
      *  - option-tooltip-thumb
      *  - option-tooltip-value
      */
-    $.widget('custom.SwatchRendererTooltip', {
+    $.widget('mage.SwatchRendererTooltip', {
         options: {
             delay: 200,                             //how much ms before tooltip to show
-            tooltip_class: 'swatch-option-tooltip'  //configurable, but remember about css
+            tooltipClass: 'swatch-option-tooltip'  //configurable, but remember about css
         },
 
         /**
@@ -50,52 +77,60 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         _init: function () {
             var $widget = this,
                 $this = this.element,
-                $element = $('.' + $widget.options.tooltip_class),
+                $element = $('.' + $widget.options.tooltipClass),
                 timer,
                 type = parseInt($this.attr('option-type'), 10),
                 label = $this.attr('option-label'),
                 thumb = $this.attr('option-tooltip-thumb'),
-                value = $this.attr('option-tooltip-value');
-
-            if ($element.size() == 0) {
-                $element = $('<div class="' + $widget.options.tooltip_class + '"><div class="image"></div><div class="title"></div><div class="corner"></div></div>');
+                value = $this.attr('option-tooltip-value'),
+                $image,
+                $title,
+                $corner;
+
+            if (!$element.size()) {
+                $element = $('<div class="' +
+                    $widget.options.tooltipClass +
+                    '"><div class="image"></div><div class="title"></div><div class="corner"></div></div>'
+                );
                 $('body').append($element);
             }
 
-            var $image = $element.find('.image'),
-                $title = $element.find('.title'),
-                $corner = $element.find('.corner');
+            $image = $element.find('.image');
+            $title = $element.find('.title');
+            $corner = $element.find('.corner');
 
             $this.hover(function () {
                 if (!$this.hasClass('disabled')) {
                     timer = setTimeout(
                         function () {
+                            var leftOpt = null,
+                                leftCorner = 0,
+                                left,
+                                $window;
 
-                            // Image
-                            if (type == 2) {
+                            if (type === 2) {
+                                // Image
                                 $image.css({
                                     'background': 'url("' + thumb + '") no-repeat center', //Background case
                                     'background-size': 'initial'
                                 });
                                 $image.show();
-                            }
-
-                            // Color
-                            else if (type == 1) {
-                                $image.css({background: value});
+                            } else if (type === 1) {
+                                // Color
+                                $image.css({
+                                    background: value
+                                });
                                 $image.show();
-                            }
-
-                            // Textual or Clear
-                            else if (type == 0 || type == 3) {
+                            } else if (type === 0 || type === 3) {
+                                // Default
                                 $image.hide();
                             }
 
                             $title.text(label);
 
-                            var leftOpt = $this.offset().left,
-                                left = leftOpt + ($this.width() / 2) - ($element.width() / 2),
-                                $window = $(window);
+                            leftOpt = $this.offset().left;
+                            left = leftOpt + $this.width() / 2 - $element.width() / 2;
+                            $window = $(window);
 
                             // the numbers (5 and 5) is magick constants for offset from left or right page
                             if (left < 0) {
@@ -105,11 +140,12 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                             }
 
                             // the numbers (6,  3 and 18) is magick constants for offset tooltip
-                            var leftCorner = 0;
+                            leftCorner = 0;
+
                             if ($element.width() < $this.width()) {
                                 leftCorner = $element.width() / 2 - 3;
                             } else {
-                                leftCorner = (leftOpt > left ? leftOpt - left : left - leftOpt) + ($this.width() / 2) - 6;
+                                leftCorner = (leftOpt > left ? leftOpt - left : left - leftOpt) + $this.width() / 2 - 6;
                             }
 
                             $corner.css({
@@ -127,6 +163,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                 $element.hide();
                 clearTimeout(timer);
             });
+
             $(document).on('tap', function () {
                 $element.hide();
                 clearTimeout(timer);
@@ -151,7 +188,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
      *  - selectorProduct (selector for product container)
      *  - selectorProductPrice (selector for change price)
      */
-    $.widget('custom.SwatchRenderer', {
+    $.widget('mage.SwatchRenderer', {
         options: {
             classes: {
                 attributeClass: 'swatch-attribute',
@@ -164,16 +201,60 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                 moreButton: 'swatch-more',
                 loader: 'swatch-option-loading'
             },
-            jsonConfig: {},                                    // option's json config
-            jsonSwatchConfig: {},                              // swatch's json config
-            selectorProduct: '.product-info-main',             // selector of parental block of prices and swatches (need to know where to seek for price block)
-            selectorProductPrice: '[data-role=priceBox]',      // selector of price wrapper (need to know where set price)
-            numberToShow: false,                               // number of controls to show (false or zero = show all)
-            onlySwatches: false,                               // show only swatch controls
-            enableControlLabel: true,                          // enable label for control
-            moreButtonText: 'More',                            // text for more button
-            mediaCallback: '',                                 // Callback url for media
-            mediaGalleryInitial: [{}]                          // Cache for BaseProduct images. Needed when option unset
+            // option's json config
+            jsonConfig: {},
+
+            // swatch's json config
+            jsonSwatchConfig: {},
+
+            // selector of parental block of prices and swatches (need to know where to seek for price block)
+            selectorProduct: '.product-info-main',
+
+            // selector of price wrapper (need to know where set price)
+            selectorProductPrice: '[data-role=priceBox]',
+
+            //selector of product images gallery wrapper
+            mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
+
+            // selector of category product tile wrapper
+            selectorProductTile: '.product-item',
+
+            // number of controls to show (false or zero = show all)
+            numberToShow: false,
+
+            // show only swatch controls
+            onlySwatches: false,
+
+            // enable label for control
+            enableControlLabel: true,
+
+            // control label id
+            controlLabelId: '',
+
+            // text for more button
+            moreButtonText: 'More',
+
+            // Callback url for media
+            mediaCallback: '',
+
+            // Local media cache
+            mediaCache: {},
+
+            // Cache for BaseProduct images. Needed when option unset
+            mediaGalleryInitial: [{}],
+
+            /**
+             * Defines the mechanism of how images of a gallery should be
+             * updated when user switches between configurations of a product.
+             *
+             * As for now value of this option can be either 'replace' or 'prepend'.
+             *
+             * @type {String}
+             */
+            gallerySwitchStrategy: 'replace',
+
+            // whether swatches are rendered in product list or on product page
+            inProductList: false
         },
 
         /**
@@ -189,7 +270,10 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
          * @private
          */
         _init: function () {
-            if (this.options.jsonConfig != '' && this.options.jsonSwatchConfig != '') {
+            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
+                // store unsorted attributes
+                this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
+                this._sortAttributes();
                 this._RenderControls();
                 $(this.element).trigger('swatch.initialized');
             } else {
@@ -197,6 +281,15 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             }
         },
 
+        /**
+         * @private
+         */
+        _sortAttributes: function () {
+            this.options.jsonConfig.attributes = _.sortBy(this.options.jsonConfig.attributes, function (attribute) {
+                return attribute.position;
+            });
+        },
+
         /**
          * @private
          */
@@ -209,16 +302,17 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                     this.element.parents('.product-item-info');
 
             if (isProductViewExist) {
-                gallery.on('gallery:loaded', function () {
-                    var galleryObject = gallery.data('gallery');
-
-                    options.mediaGalleryInitial = galleryObject.returnCurrentImages();
-                });
+                gallery.data('gallery') ?
+                    this._onGalleryLoaded(gallery) :
+                    gallery.on('gallery:loaded', this._onGalleryLoaded.bind(this, gallery));
             } else {
                 options.mediaGalleryInitial = [{
                     'img': $main.find('.product-image-photo').attr('src')
                 }];
             }
+
+            this.productForm = this.element.parents(this.options.selectorProductTile).find('form:first');
+            this.inProductList = this.productForm.length > 0;
         },
 
         /**
@@ -236,9 +330,11 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
 
             $.each(this.options.jsonConfig.attributes, function () {
                 var item = this,
-                    options = $widget._RenderSwatchOptions(item),
+                    controlLabelId = 'option-label-' + item.code + '-' + item.id,
+                    options = $widget._RenderSwatchOptions(item, controlLabelId),
                     select = $widget._RenderSwatchSelect(item, chooseText),
                     input = $widget._RenderFormInput(item),
+                    listLabel = '',
                     label = '';
 
                 // Show only swatch controls
@@ -248,14 +344,35 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
 
                 if ($widget.options.enableControlLabel) {
                     label +=
-                        '<span class="' + classes.attributeLabelClass + '">' + item.label + '</span>' +
+                        '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
+                        item.label +
+                        '</span>' +
                         '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>';
                 }
 
+                if ($widget.inProductList) {
+                    $widget.productForm.append(input);
+                    input = '';
+                    listLabel = 'aria-label="' + item.label + '"';
+                } else {
+                    listLabel = 'aria-labelledby="' + controlLabelId + '"';
+                }
+
                 // Create new control
                 container.append(
-                    '<div class="' + classes.attributeClass + ' ' + item.code + '" attribute-code="' + item.code + '" attribute-id="' + item.id + '">' + label +
-                    '<div class="' + classes.attributeOptionsWrapper + ' clearfix">' + options + select + '</div>' + input + '</div>'
+                    '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
+                    'attribute-code="' + item.code + '" ' +
+                    'attribute-id="' + item.id + '">' +
+                    label +
+                    '<div aria-activedescendant="" ' +
+                    'tabindex="0" ' +
+                    'aria-invalid="false" ' +
+                    'aria-required="true" ' +
+                    'role="listbox" ' + listLabel +
+                    'class="' + classes.attributeOptionsWrapper + ' clearfix">' +
+                    options + select +
+                    '</div>' + input +
+                    '</div>'
                 );
 
                 $widget.optionsMap[item.id] = {};
@@ -264,7 +381,10 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                 $.each(item.options, function () {
                     if (this.products.length > 0) {
                         $widget.optionsMap[item.id][this.id] = {
-                            price: parseInt($widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount, 10),
+                            price: parseInt(
+                                $widget.options.jsonConfig.optionPrices[this.products[0]].finalPrice.amount,
+                                10
+                            ),
                             products: this.products
                         };
                     }
@@ -286,79 +406,90 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             $widget._Rewind(container);
 
             //Emulate click on all swatches from Request
-            $widget._EmulateSelected();
+            $widget._EmulateSelected($.parseQuery());
+            $widget._EmulateSelected($widget._getSelectedAttributes());
         },
 
         /**
          * Render swatch options by part of config
          *
-         * @param config
-         * @returns {string}
+         * @param {Object} config
+         * @param {String} controlId
+         * @returns {String}
          * @private
          */
-        _RenderSwatchOptions: function (config) {
-            if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
-                return '';
-            }
-
+        _RenderSwatchOptions: function (config, controlId) {
             var optionConfig = this.options.jsonSwatchConfig[config.id],
                 optionClass = this.options.classes.optionClass,
-                moreLimit = this.options.numberToShow,
+                moreLimit = parseInt(this.options.numberToShow, 10),
                 moreClass = this.options.classes.moreButton,
                 moreText = this.options.moreButtonText,
                 countAttributes = 0,
                 html = '';
 
+            if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
+                return '';
+            }
+
             $.each(config.options, function () {
+                var id,
+                    type,
+                    value,
+                    thumb,
+                    label,
+                    attr;
+
                 if (!optionConfig.hasOwnProperty(this.id)) {
                     return '';
                 }
 
                 // Add more button
-                if (moreLimit != false && moreLimit == countAttributes++) {
+                if (moreLimit === countAttributes++) {
                     html += '<a href="#" class="' + moreClass + '">' + moreText + '</a>';
                 }
 
-                var id = this.id,
-                    type = optionConfig[id].type,
-                    value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '',
-                    thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '',
-                    label = this.label ? this.label : '',
-                    attr =
-                        ' option-type="' + type + '"' +
-                        ' option-id="' + id + '"' +
-                        ' option-label="' + label + '"' +
-                        ' option-tooltip-thumb="' + thumb + '"' +
-                        ' option-tooltip-value="' + value + '"';
+                id = this.id;
+                type = parseInt(optionConfig[id].type, 10);
+                value = optionConfig[id].hasOwnProperty('value') ? optionConfig[id].value : '';
+                thumb = optionConfig[id].hasOwnProperty('thumb') ? optionConfig[id].thumb : '';
+                label = this.label ? this.label : '';
+                attr =
+                    ' id="' + controlId + '-item-' + id + '"' +
+                    ' aria-checked="false"' +
+                    ' aria-describedby="' + controlId + '"' +
+                    ' tabindex="0"' +
+                    ' option-type="' + type + '"' +
+                    ' option-id="' + id + '"' +
+                    ' option-label="' + label + '"' +
+                    ' aria-label="' + label + '"' +
+                    ' option-tooltip-thumb="' + thumb + '"' +
+                    ' option-tooltip-value="' + value + '"' +
+                    ' role="option"';
 
                 if (!this.hasOwnProperty('products') || this.products.length <= 0) {
                     attr += ' option-empty="true"';
                 }
 
-                // Text
-                if (type == 0) {
-                    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) + '</div>';
-                }
-
-                // Color
-                else if (type == 1) {
+                if (type === 0) {
+                    // Text
+                    html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
+                        '</div>';
+                } else if (type === 1) {
+                    // Color
                     html += '<div class="' + optionClass + ' color" ' + attr +
-                        '" style="background: ' + value + ' no-repeat center; background-size: initial;">' + '' + '</div>';
-                }
-
-                // Image
-                else if (type == 2) {
+                        ' style="background: ' + value +
+                        ' no-repeat center; background-size: initial;">' + '' +
+                        '</div>';
+                } else if (type === 2) {
+                    // Image
                     html += '<div class="' + optionClass + ' image" ' + attr +
-                        '" style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' + '</div>';
-                }
-
-                // Clear
-                else if (type == 3) {
+                        ' style="background: url(' + value + ') no-repeat center; background-size: initial;">' + '' +
+                        '</div>';
+                } else if (type === 3) {
+                    // Clear
                     html += '<div class="' + optionClass + '" ' + attr + '></div>';
-                }
-
-                // Default
-                else {
+                } else {
+                    // Default
                     html += '<div class="' + optionClass + '" ' + attr + '>' + label + '</div>';
                 }
             });
@@ -369,17 +500,19 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         /**
          * Render select by part of config
          *
-         * @param config
-         * @param chooseText
-         * @returns {string}
+         * @param {Object} config
+         * @param {String} chooseText
+         * @returns {String}
          * @private
          */
         _RenderSwatchSelect: function (config, chooseText) {
+            var html;
+
             if (this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
                 return '';
             }
 
-            var html =
+            html =
                 '<select class="' + this.options.classes.selectClass + ' ' + config.code + '">' +
                 '<option value="0" option-id="0">' + chooseText + '</option>';
 
@@ -403,14 +536,16 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
          * Input for submit form.
          * This control shouldn't have "type=hidden", "display: none" for validation work :(
          *
-         * @param config
+         * @param {Object} config
          * @private
          */
         _RenderFormInput: function (config) {
-            return '<input class="' + this.options.classes.attributeInput + '" ' +
+            return '<input class="' + this.options.classes.attributeInput + ' super-attribute-select" ' +
                 'name="super_attribute[' + config.id + ']" ' +
+                'type="text" ' +
                 'value="" ' +
-                'data-validate="{required:true}" ' +
+                'data-selector="super_attribute[' + config.id + ']" ' +
+                'data-validate="{required: true}" ' +
                 'aria-required="true" ' +
                 'aria-invalid="true" ' +
                 'style="visibility: hidden; position:absolute; left:-1000px">';
@@ -422,36 +557,61 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
          * @private
          */
         _EventListener: function () {
+            var $widget = this,
+                options = this.options.classes,
+                target;
 
-            var $widget = this;
-
-            $widget.element.on('click', '.' + this.options.classes.optionClass, function () {
+            $widget.element.on('click', '.' + options.optionClass, function () {
                 return $widget._OnClick($(this), $widget);
             });
 
-            $widget.element.on('change', '.' + this.options.classes.selectClass, function () {
+            $widget.element.on('change', '.' + options.selectClass, function () {
                 return $widget._OnChange($(this), $widget);
             });
 
-            $widget.element.on('click', '.' + this.options.classes.moreButton, function (e) {
+            $widget.element.on('click', '.' + options.moreButton, function (e) {
                 e.preventDefault();
+
                 return $widget._OnMoreClick($(this));
             });
+
+            $widget.element.on('keydown', function (e) {
+                if (e.which === 13) {
+                    target = $(e.target);
+
+                    if (target.is('.' + options.optionClass)) {
+                        return $widget._OnClick(target, $widget);
+                    } else if (target.is('.' + options.selectClass)) {
+                        return $widget._OnChange(target, $widget);
+                    } else if (target.is('.' + options.moreButton)) {
+                        e.preventDefault();
+
+                        return $widget._OnMoreClick(target);
+                    }
+                }
+            });
         },
 
         /**
          * Event for swatch options
          *
-         * @param $this
-         * @param $widget
+         * @param {Object} $this
+         * @param {Object} $widget
          * @private
          */
         _OnClick: function ($this, $widget) {
-
             var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
+                $wrapper = $this.parents('.' + $widget.options.classes.attributeOptionsWrapper),
                 $label = $parent.find('.' + $widget.options.classes.attributeSelectedOptionLabelClass),
+                attributeId = $parent.attr('attribute-id'),
                 $input = $parent.find('.' + $widget.options.classes.attributeInput);
 
+            if ($widget.inProductList) {
+                $input = $widget.productForm.find(
+                    '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
+                );
+            }
+
             if ($this.hasClass('disabled')) {
                 return;
             }
@@ -460,11 +620,14 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                 $parent.removeAttr('option-selected').find('.selected').removeClass('selected');
                 $input.val('');
                 $label.text('');
+                $this.attr('aria-checked', false);
             } else {
                 $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');
                 $label.text($this.attr('option-label'));
                 $input.val($this.attr('option-id'));
+                $input.attr('data-attr-name', this._getAttributeCodeById(attributeId));
                 $this.addClass('selected');
+                $widget._toggleCheckedAttributes($this, $wrapper);
             }
 
             $widget._Rebuild();
@@ -476,19 +639,53 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             }
 
             $widget._LoadProductMedia();
+            $input.trigger('change');
+        },
+
+        /**
+         * Get human readable attribute code (eg. size, color) by it ID from configuration
+         *
+         * @param {Number} attributeId
+         * @returns {*}
+         * @private
+         */
+        _getAttributeCodeById: function (attributeId) {
+            var attribute = this.options.jsonConfig.mappedAttributes[attributeId];
+
+            return attribute ? attribute.code : attributeId;
+        },
+
+        /**
+         * Toggle accessibility attributes
+         *
+         * @param {Object} $this
+         * @param {Object} $wrapper
+         * @private
+         */
+        _toggleCheckedAttributes: function ($this, $wrapper) {
+            $wrapper.attr('aria-activedescendant', $this.attr('id'))
+                .find('.' + this.options.classes.optionClass).attr('aria-checked', false);
+            $this.attr('aria-checked', true);
         },
 
         /**
          * Event for select
          *
-         * @param $this
-         * @param $widget
+         * @param {Object} $this
+         * @param {Object} $widget
          * @private
          */
         _OnChange: function ($this, $widget) {
             var $parent = $this.parents('.' + $widget.options.classes.attributeClass),
+                attributeId = $parent.attr('attribute-id'),
                 $input = $parent.find('.' + $widget.options.classes.attributeInput);
 
+            if ($widget.productForm.length > 0) {
+                $input = $widget.productForm.find(
+                    '.' + $widget.options.classes.attributeInput + '[name="super_attribute[' + attributeId + ']"]'
+                );
+            }
+
             if ($this.val() > 0) {
                 $parent.attr('option-selected', $this.val());
                 $input.val($this.val());
@@ -500,12 +697,13 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             $widget._Rebuild();
             $widget._UpdatePrice();
             $widget._LoadProductMedia();
+            $input.trigger('change');
         },
 
         /**
          * Event for more switcher
          *
-         * @param $this
+         * @param {Object} $this
          * @private
          */
         _OnMoreClick: function ($this) {
@@ -548,22 +746,22 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                     id = $this.attr('attribute-id'),
                     products = $widget._CalcProducts(id);
 
-                if (selected.size() == 1 && selected.first().attr('attribute-id') == id) {
+                if (selected.size() === 1 && selected.first().attr('attribute-id') === id) {
                     return;
                 }
 
                 $this.find('[option-id]').each(function () {
-                    var $this = $(this),
-                        option = $this.attr('option-id');
+                    var $element = $(this),
+                        option = $element.attr('option-id');
 
                     if (!$widget.optionsMap.hasOwnProperty(id) || !$widget.optionsMap[id].hasOwnProperty(option) ||
-                        $this.hasClass('selected') ||
-                        $this.is(':selected')) {
+                        $element.hasClass('selected') ||
+                        $element.is(':selected')) {
                         return;
                     }
 
                     if (_.intersection(products, $widget.optionsMap[id][option].products).length <= 0) {
-                        $this.attr('disabled', true).addClass('disabled');
+                        $element.attr('disabled', true).addClass('disabled');
                     }
                 });
             });
@@ -581,10 +779,10 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
 
             // Generate intersection of products
             $widget.element.find('.' + $widget.options.classes.attributeClass + '[option-selected]').each(function () {
-                var id = $(this).attr('attribute-id');
-                var option = $(this).attr('option-selected');
+                var id = $(this).attr('attribute-id'),
+                    option = $(this).attr('option-selected');
 
-                if ($skipAttributeId != undefined && $skipAttributeId == id) {
+                if ($skipAttributeId !== undefined && $skipAttributeId === id) {
                     return;
                 }
 
@@ -592,7 +790,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                     return;
                 }
 
-                if (products.length == 0) {
+                if (products.length === 0) {
                     products = $widget.optionsMap[id][option].products;
                 } else {
                     products = _.intersection(products, $widget.optionsMap[id][option].products);
@@ -615,10 +813,9 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                 result;
 
             $widget.element.find('.' + $widget.options.classes.attributeClass + '[option-selected]').each(function () {
-                var attributeId = $(this).attr('attribute-id'),
-                    selectedOptionId = $(this).attr('option-selected');
+                var attributeId = $(this).attr('attribute-id');
 
-                options[attributeId] = selectedOptionId;
+                options[attributeId] = $(this).attr('option-selected');
             });
 
             result = $widget.options.jsonConfig.optionPrices[_.findKey($widget.options.jsonConfig.index, options)];
@@ -629,13 +826,14 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                     'prices': $widget._getPrices(result, $productPrice.priceBox('option').prices)
                 }
             );
-
         },
 
         /**
          * Get prices
+         *
          * @param {Object} newPrices
-         * @returns {Object}
+         * @param {Object} displayPrices
+         * @returns {*}
          * @private
          */
         _getPrices: function (newPrices, displayPrices) {
@@ -663,7 +861,23 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
             var $widget = this,
                 $this = $widget.element,
                 attributes = {},
-                productId = 0;
+                productId = 0,
+                mediaCallData,
+                mediaCacheKey,
+
+                /**
+                 * Processes product media data
+                 *
+                 * @param {Object} data
+                 * @returns void
+                 */
+                mediaSuccessCallback = function (data) {
+                    if (!(mediaCacheKey in $widget.options.mediaCache)) {
+                        $widget.options.mediaCache[mediaCacheKey] = data;
+                    }
+                    $widget._ProductMediaCallback($this, data);
+                    $widget._DisableProductMediaLoader($this);
+                };
 
             if (!$widget.options.mediaCallback) {
                 return;
@@ -671,6 +885,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
 
             $this.find('[option-selected]').each(function () {
                 var $selected = $(this);
+
                 attributes[$selected.attr('attribute-code')] = $selected.attr('option-selected');
             });
 
@@ -683,27 +898,34 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
                     .find('.price-box.price-final_price').attr('data-product-id');
             }
 
-            var additional = $.parseParams(window.location.search.substring(1));
+            mediaCallData = {
+                'product_id': productId,
+                'attributes': attributes,
+                'additional': $.parseQuery()
+            };
+            mediaCacheKey = JSON.stringify(mediaCallData);
 
-            $widget._XhrKiller();
-            $widget._EnableProductMediaLoader($this);
-            $widget.xhr = $.post(
-                $widget.options.mediaCallback,
-                {product_id: productId, attributes: attributes, isAjax: true, additional: additional},
-                function (data) {
-                    $widget._ProductMediaCallback($this, data);
-                    $widget._DisableProductMediaLoader($this);
-                },
-                'json'
-            ).done(function () {
+            if (mediaCacheKey in $widget.options.mediaCache) {
+                mediaSuccessCallback($widget.options.mediaCache[mediaCacheKey]);
+            } else {
+                mediaCallData.isAjax = true;
+                $widget._XhrKiller();
+                $widget._EnableProductMediaLoader($this);
+                $widget.xhr = $.post(
+                    $widget.options.mediaCallback,
+                    mediaCallData,
+                    mediaSuccessCallback,
+                    'json'
+                ).done(function () {
                     $widget._XhrKiller();
                 });
+            }
         },
 
         /**
          * Enable loader
          *
-         * @param $this
+         * @param {Object} $this
          * @private
          */
         _EnableProductMediaLoader: function ($this) {
@@ -722,7 +944,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         /**
          * Disable loader
          *
-         * @param $this
+         * @param {Object} $this
          * @private
          */
         _DisableProductMediaLoader: function ($this) {
@@ -741,51 +963,73 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         /**
          * Callback for product media
          *
-         * @param $this
-         * @param response
+         * @param {Object} $this
+         * @param {String} response
          * @private
          */
         _ProductMediaCallback: function ($this, response) {
             var isProductViewExist = $('body.catalog-product-view').size() > 0,
-                $main = isProductViewExist
-                    ? $this.parents('.column.main')
-                    : $this.parents('.product-item-info'),
+                $main = isProductViewExist ? $this.parents('.column.main') : $this.parents('.product-item-info'),
                 $widget = this,
                 images = [],
+
+                /**
+                 * Check whether object supported or not
+                 *
+                 * @param {Object} e
+                 * @returns {*|Boolean}
+                 */
                 support = function (e) {
                     return e.hasOwnProperty('large') && e.hasOwnProperty('medium') && e.hasOwnProperty('small');
                 };
 
-            if ($widget._ObjectLength(response) < 1) {
+            if (_.size($widget) < 1 || !support(response)) {
                 this.updateBaseImage(this.options.mediaGalleryInitial, $main, isProductViewExist);
 
                 return;
             }
 
-            if (support(response)) {
-                images.push({
-                    full: response.large,
-                    img: response.medium,
-                    thumb: response.small
-                });
+            images.push({
+                full: response.large,
+                img: response.medium,
+                thumb: response.small,
+                isMain: true
+            });
 
-                if (response.hasOwnProperty('gallery')) {
-                    $.each(response.gallery, function () {
-                        if (!support(this) || response.large === this.large) {
-                            return;
-                        }
-                        images.push({
-                            full: this.large,
-                            img: this.medium,
-                            thumb: this.small
-                        });
+            if (response.hasOwnProperty('gallery')) {
+                $.each(response.gallery, function () {
+                    if (!support(this) || response.large === this.large) {
+                        return;
+                    }
+                    images.push({
+                        full: this.large,
+                        img: this.medium,
+                        thumb: this.small
                     });
-                }
+                });
             }
 
             this.updateBaseImage(images, $main, isProductViewExist);
         },
 
+        /**
+         * Check if images to update are initial and set their type
+         * @param {Array} images
+         */
+        _setImageType: function (images) {
+            var initial = this.options.mediaGalleryInitial[0].img;
+
+            if (images[0].img === initial) {
+                images = $.extend(true, [], this.options.mediaGalleryInitial);
+            } else {
+                images.map(function (img) {
+                    img.type = 'image';
+                });
+            }
+
+            return images;
+        },
+
         /**
          * Update [gallery-placeholder] or [product-image-photo]
          * @param {Array} images
@@ -793,13 +1037,28 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
          * @param {Boolean} isProductViewExist
          */
         updateBaseImage: function (images, context, isProductViewExist) {
-            var justAnImage = images[0];
+            var justAnImage = images[0],
+                initialImages = this.options.mediaGalleryInitial,
+                gallery = context.find(this.options.mediaGallerySelector).data('gallery'),
+                imagesToUpdate,
+                isInitial;
 
             if (isProductViewExist) {
-                context
-                    .find('[data-gallery-role=gallery-placeholder]')
-                    .data('gallery')
-                    .updateData(images);
+                imagesToUpdate = images.length ? this._setImageType($.extend(true, [], images)) : [];
+                isInitial = _.isEqual(imagesToUpdate, initialImages);
+
+                if (this.options.gallerySwitchStrategy === 'prepend' && !isInitial) {
+                    imagesToUpdate = imagesToUpdate.concat(initialImages);
+                }
+
+                gallery.updateData(imagesToUpdate);
+
+                if (isInitial) {
+                    $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
+                }
+
+                gallery.first();
+
             } else if (justAnImage && justAnImage.img) {
                 context.find('.product-image-photo').attr('src', justAnImage.img);
             }
@@ -821,18 +1080,14 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
 
         /**
          * Emulate mouse click on all swatches that should be selected
-         *
+         * @param {Object} [selectedAttributes]
          * @private
          */
-        _EmulateSelected: function () {
-            var $widget = this,
-                $this = $widget.element,
-                request = $.parseParams(window.location.search.substring(1));
-
-            $.each(request, function (key, value) {
-                $this.find('.' + $widget.options.classes.attributeClass
-                    + '[attribute-code="' + key + '"] [option-id="' + value + '"]').trigger('click');
-            });
+        _EmulateSelected: function (selectedAttributes) {
+            $.each(selectedAttributes, $.proxy(function (attributeCode, optionId) {
+                this.element.find('.' + this.options.classes.attributeClass +
+                    '[attribute-code="' + attributeCode + '"] [option-id="' + optionId + '"]').trigger('click');
+            }, this));
         },
 
         /**
@@ -843,7 +1098,7 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         _EmulateSelectedByAttributeId: function (selectedAttributes) {
             $.each(selectedAttributes, $.proxy(function (attributeId, optionId) {
                 var elem = this.element.find('.' + this.options.classes.attributeClass +
-                    '[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
+                        '[attribute-id="' + attributeId + '"] [option-id="' + optionId + '"]'),
                     parentInput = elem.parent();
 
                 if (elem.hasClass('selected')) {
@@ -860,21 +1115,38 @@ define(['jquery', 'underscore', 'jquery/ui'], function ($, _) {
         },
 
         /**
-         * Returns an array/object's length
-         * @param obj
-         * @returns {number}
+         * Get default options values settings with either URL query parameters
          * @private
          */
-        _ObjectLength: function (obj) {
-            var size = 0,
-                key;
+        _getSelectedAttributes: function () {
+            var hashIndex = window.location.href.indexOf('#'),
+                selectedAttributes = {},
+                params;
 
-            for (key in obj) {
-                if (obj.hasOwnProperty(key)) size++;
+            if (hashIndex !== -1) {
+                params = $.parseQuery(window.location.href.substr(hashIndex + 1));
+
+                selectedAttributes = _.invert(_.mapObject(_.invert(params), function (attributeId) {
+                    var attribute = this.options.jsonConfig.mappedAttributes[attributeId];
+
+                    return attribute ? attribute.code : attributeId;
+                }.bind(this)));
             }
 
-            return size;
+            return selectedAttributes;
+        },
+
+        /**
+         * Callback which fired after gallery gets initialized.
+         *
+         * @param {HTMLElement} element - DOM element associated with a gallery.
+         */
+        _onGalleryLoaded: function (element) {
+            var galleryObject = element.data('gallery');
+
+            this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
         }
     });
-    return $.custom.SwatchRenderer;
+
+    return $.mage.SwatchRenderer;
 });
diff --git a/app/code/Magento/Swatches/view/frontend/web/js/catalog-add-to-cart.js b/app/code/Magento/Swatches/view/frontend/web/js/catalog-add-to-cart.js
new file mode 100644
index 0000000000000..efff66c3a4cbb
--- /dev/null
+++ b/app/code/Magento/Swatches/view/frontend/web/js/catalog-add-to-cart.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+require([
+    'jquery'
+], function ($) {
+    'use strict';
+
+    $('body').on('catalogCategoryAddToCartRedirect', function (event, data) {
+        $(data.form).find('[name*="super"]').each(function (index, item) {
+            debugger;
+            var $item = $(item);
+
+            data.redirectParameters.push($item.attr('data-attr-name') + '=' + $item.val());
+        });
+    });
+});
diff --git a/dev/tests/functional/tests/app/Magento/Catalog/Test/Handler/CatalogProductAttribute/Curl.php b/dev/tests/functional/tests/app/Magento/Catalog/Test/Handler/CatalogProductAttribute/Curl.php
index a4a773ae7c7ec..28656488dc2dc 100644
--- a/dev/tests/functional/tests/app/Magento/Catalog/Test/Handler/CatalogProductAttribute/Curl.php
+++ b/dev/tests/functional/tests/app/Magento/Catalog/Test/Handler/CatalogProductAttribute/Curl.php
@@ -47,6 +47,14 @@ class Curl extends AbstractCurl implements CatalogProductAttributeInterface
             'No' => 0,
             'Yes' => 1,
         ],
+        'is_global' => [
+            'Store View' => '0',
+            'Global' => '1',
+        ],
+        'used_in_product_listing' => [
+            'No' => '0',
+            'Yes' => '1',
+        ],
     ];
 
     /**
@@ -76,6 +84,7 @@ public function persist(FixtureInterface $fixture = null)
             unset($data['options']);
         }
 
+        $data = $this->changeStructureOfTheData($data);
         $url = $_ENV['app_backend_url'] . 'catalog/product_attribute/save/back/edit';
         $curl = new BackendDecorator(new CurlTransport(), $this->_configuration);
         $curl->write($url, $data);
@@ -104,4 +113,14 @@ public function persist(FixtureInterface $fixture = null)
 
         return $resultData;
     }
+
+    /**
+     * @param array $data
+     *
+     * @return array
+     */
+    protected function changeStructureOfTheData(array $data)
+    {
+        return $data;
+    }
 }
diff --git a/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Handler/ConfigurableProduct/Curl.php b/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Handler/ConfigurableProduct/Curl.php
index 713e30f5dadc1..0f592d2ca74cd 100644
--- a/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Handler/ConfigurableProduct/Curl.php
+++ b/dev/tests/functional/tests/app/Magento/ConfigurableProduct/Test/Handler/ConfigurableProduct/Curl.php
@@ -140,7 +140,7 @@ protected function prepareVariationsMatrix(FixtureInterface $product)
                 $keyIds[] = $attribute['options'][$optionKey]['id'];
                 $configurableAttribute[] = sprintf(
                     '"%s":"%s"',
-                    $attribute['attribute_code'],
+                    isset($attribute['attribute_code']) ? $attribute['attribute_code'] : $attribute['frontend_label'],
                     $attribute['options'][$optionKey]['id']
                 );
             }
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ListProduct.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ListProduct.php
new file mode 100644
index 0000000000000..c2496dbf1bbfa
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ListProduct.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Block\Product;
+
+use Magento\Catalog\Test\Block\Product\ListProduct as CatalogListProduct;
+use Magento\Mtf\Client\Locator;
+use Magento\Mtf\Fixture\FixtureInterface;
+use Magento\Swatches\Test\Block\Product\ProductList\ProductItem;
+
+/**
+ * Product list block.
+ */
+class ListProduct extends CatalogListProduct
+{
+    /**
+     * @inheritdoc
+     */
+    public function getProductItem(FixtureInterface $product)
+    {
+        /** @var string $locator */
+        $locator = sprintf($this->productItem, $product->getName());
+
+        return $this->blockFactory->create(
+            ProductItem::class,
+            [
+                'element' => $this->_rootElement->find($locator, Locator::SELECTOR_XPATH),
+            ]
+        );
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ProductList/ProductItem.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ProductList/ProductItem.php
new file mode 100644
index 0000000000000..90bd8381ea78a
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ProductList/ProductItem.php
@@ -0,0 +1,93 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Block\Product\ProductList;
+
+use Magento\Catalog\Test\Block\Product\ProductList\ProductItem as CatalogProductItem;
+use Magento\ConfigurableProduct\Test\Fixture\ConfigurableProduct;
+use Magento\Mtf\Client\Locator;
+use Magento\Swatches\Test\Fixture\SwatchesProductAttribute;
+
+/**
+ * Product item block on frontend category view.
+ */
+class ProductItem extends CatalogProductItem
+{
+    /**
+     * Selector for the swatches of the product.
+     *
+     * @var string
+     */
+    protected $swatchSelector = 'div[option-id="%s"]';
+
+    /**
+     * Fill product options on category page.
+     *
+     * @param ConfigurableProduct $product
+     * @return void
+     */
+    public function fillData(ConfigurableProduct $product)
+    {
+        /** @var array $checkoutData */
+        $checkoutData = $product->getCheckoutData();
+
+        /** @var array $options */
+        $options = $checkoutData['options']['configurable_options'];
+
+        /** @var array $confAttrData */
+        $confAttrData = $product->getDataFieldConfig('configurable_attributes_data');
+
+        /** @var ConfigurableProduct\ConfigurableAttributesData $confAttrSource */
+        $confAttrSource = $confAttrData['source'];
+
+        /** @var SwatchesProductAttribute[] $attributes */
+        $attributes = $confAttrSource->getAttributes();
+
+        foreach ($options as $option) {
+            if (!isset($attributes[$option['title']])) {
+                continue;
+            }
+
+            /** @var array $availableOptions */
+            $availableOptions = $attributes[$option['title']]->getOptions();
+
+            /** @var string $optionKey */
+            $optionKey = str_replace('option_key_', '', $option['value']);
+
+            if (!isset($availableOptions[$optionKey])) {
+                continue;
+            }
+
+            /** @var array $optionForSelect */
+            $optionForSelect = $availableOptions[$optionKey];
+
+            $this->clickOnSwatch($optionForSelect['id']);
+        }
+    }
+
+    /**
+     * Click on swatch.
+     *
+     * @param $optionId
+     */
+    private function clickOnSwatch($optionId)
+    {
+        /** @var string $selector */
+        $selector = sprintf($this->swatchSelector, $optionId);
+
+        $this->_rootElement->find($selector, Locator::SELECTOR_CSS)->click();
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function clickAddToCart()
+    {
+        $this->_rootElement->hover();
+
+        parent::clickAddToCart();
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ViewWithSwatches.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ViewWithSwatches.php
new file mode 100644
index 0000000000000..59972291d3a8e
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Block/Product/ViewWithSwatches.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Block\Product;
+
+use Magento\Catalog\Test\Block\Product\View;
+use Magento\Mtf\Fixture\FixtureInterface;
+
+/**
+ * Configurable product view block with swatch attributes on frontend product page.
+ */
+class ViewWithSwatches extends View
+{
+    /**
+     * Selector for swatch attribute value.
+     *
+     * @var string
+     */
+    private $swatchAttributeSelector = '.swatch-attribute.%s .swatch-attribute-selected-option';
+
+    /**
+     * Get chosen options from the product view page.
+     *
+     * @param FixtureInterface $product
+     * @return array
+     */
+    public function getSelectedSwatchOptions(FixtureInterface $product)
+    {
+        /** @var array $checkoutData */
+        $checkoutData = $product->getCheckoutData();
+
+        /** @var array $availableAttributes */
+        $availableAttributes = $product->getConfigurableAttributesData();
+
+        /** @var array $attributesData */
+        $attributesData = $availableAttributes['attributes_data'];
+
+        /** @var array $formData */
+        $formData = [];
+
+        /** @var array $item */
+        foreach ($checkoutData['options']['configurable_options'] as $item) {
+            /** @var string $selector */
+            $selector = sprintf(
+                $this->swatchAttributeSelector,
+                $attributesData[$item['title']]['attribute_code']
+            );
+
+            $this->waitForElementVisible($selector);
+
+            /** @var string $selected */
+            $selected = $this->_rootElement->find($selector)->getText();
+
+            $formData[$item['title']] = $selected;
+        }
+
+        return $formData;
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Constraint/AssertSwatchConfigurableProductPage.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Constraint/AssertSwatchConfigurableProductPage.php
new file mode 100644
index 0000000000000..8f207134540f9
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Constraint/AssertSwatchConfigurableProductPage.php
@@ -0,0 +1,123 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Constraint;
+
+use Magento\Catalog\Test\Constraint\AssertProductPage;
+use Magento\Catalog\Test\Page\Product\CatalogProductView;
+use Magento\Mtf\Client\BrowserInterface;
+use Magento\Mtf\Fixture\FixtureInterface;
+use Magento\Swatches\Test\Block\Product\ViewWithSwatches;
+use Magento\Swatches\Test\TestStep\AddProductToCartFromCatalogCategoryPageStep;
+
+/**
+ * Assert that product with swatches and regular dropdown redirect can't be add
+ * to cart from catalog catergory page.
+ */
+class AssertSwatchConfigurableProductPage extends AssertProductPage
+{
+    /**
+     * Configurable product view block with swatch attributes on frontend product page.
+     *
+     * @var ViewWithSwatches
+     */
+    protected $productView;
+
+    /**
+     * {@inheritdoc}
+     */
+    public function processAssert(
+        BrowserInterface $browser,
+        CatalogProductView $catalogProductView,
+        FixtureInterface $product
+    ) {
+        $this->product = $product;
+        $this->productView = $catalogProductView->getProductViewWithSwatchesBlock();
+        $this->objectManager->create(
+            AddProductToCartFromCatalogCategoryPageStep::class,
+            [
+                'product' => $product,
+            ]
+        )->run();
+
+        /*we need this line for waiti until page will be fully loaded*/
+        $this->productView->getSelectedSwatchOptions($this->product);
+
+        /** @var array $errors */
+        $errors = $this->verify();
+
+        \PHPUnit_Framework_Assert::assertEmpty(
+            $errors,
+            "\nFound the following errors:\n" . implode(" \n", $errors)
+        );
+    }
+
+    /**
+     * Verify product on product view page.
+     *
+     * @return array
+     */
+    protected function verify()
+    {
+        /** @var array $errors */
+        $errors = parent::verify();
+        $errors[] = $this->verifySwatches();
+
+        return array_filter($errors);
+    }
+
+    /**
+     * Verify selected swatches on product view page.
+     *
+     * @return array|string
+     */
+    protected function verifySwatches()
+    {
+        $actualData = $this->productView->getSelectedSwatchOptions($this->product);
+        $expectedData = $this->convertCheckoutData($this->product);
+
+        return $this->verifyData($expectedData, $actualData);
+    }
+
+    /**
+     * Get swatch attributes formatter to attributes comparison.
+     *
+     * @param FixtureInterface $product
+     * @return array
+     */
+    public function convertCheckoutData(FixtureInterface $product)
+    {
+        /** @var array $out */
+        $out = [];
+
+        /** @var array $checkoutData */
+        $checkoutData = $product->getCheckoutData();
+
+        /** @var array $availableAttributes */
+        $availableAttributes = $product->getConfigurableAttributesData();
+
+        /** @var array $attributesData */
+        $attributesData = $availableAttributes['attributes_data'];
+
+        /** @var array $item */
+        foreach ($checkoutData['options']['configurable_options'] as $item) {
+            $out[$item['title']] =
+                $attributesData[$item['title']]['options'][$item['value']]['label'];
+        }
+
+        return $out;
+    }
+
+    /**
+     * Return string representation of the object.
+     *
+     * @return string
+     */
+    public function toString()
+    {
+        return 'Swatch attributes displayed as expected on product page';
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/Cart/Item.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/Cart/Item.php
new file mode 100644
index 0000000000000..46c9b383ae842
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/Cart/Item.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Fixture\Cart;
+
+use Magento\ConfigurableProduct\Test\Fixture\Cart\Item as ConfigurableCart;
+
+/**
+ * @inheritdoc
+ */
+class Item extends ConfigurableCart
+{
+    //
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/ConfigurableProduct.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/ConfigurableProduct.xml
new file mode 100644
index 0000000000000..7a92d5ac09d01
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/ConfigurableProduct.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/etc/fixture.xsd">
+    <fixture name="configurableProductSwatch"
+             module="Magento_Swatches"
+             class="Magento\Swatches\Test\Fixture\ConfigurableProduct"
+             extends="\Magento\ConfigurableProduct\Test\Fixture\ConfigurableProduct">
+    </fixture>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/SwatchProductAttribute.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/SwatchProductAttribute.xml
new file mode 100644
index 0000000000000..d96331b8159d5
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Fixture/SwatchProductAttribute.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/etc/fixture.xsd">
+    <fixture name="swatchesProductAttribute"
+             module="Magento_Swatches"
+             handler_interface="Magento\Swatches\Test\Handler\SwatchProductAttribute\SwatchProductAttributeInterface"
+             repository_class="Magento\Swatches\Test\Repository\SwatchProductAttribute"
+             class="Magento\Swatches\Test\Fixture\SwatchesProductAttribute"
+             extends="\Magento\Catalog\Test\Fixture\CatalogProductAttribute">
+    </fixture>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/Curl.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/Curl.php
new file mode 100644
index 0000000000000..54eeac4c1c5cd
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/Curl.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Handler\SwatchProductAttribute;
+
+use Magento\Catalog\Test\Handler\CatalogProductAttribute\Curl as CatalogProductAttributeCurl;
+use Magento\Mtf\Config\DataInterface;
+use Magento\Mtf\System\Event\EventManagerInterface;
+
+/**
+ * Curl handler for creating Swatch Attribute.
+ */
+class Curl extends CatalogProductAttributeCurl implements SwatchProductAttributeInterface
+{
+    /**
+     * Add mapping data related to swatches.
+     *
+     * @param DataInterface $configuration
+     * @param EventManagerInterface $eventManager
+     */
+    public function __construct(
+        DataInterface $configuration,
+        EventManagerInterface $eventManager
+    ) {
+        parent::__construct($configuration, $eventManager);
+        $this->mappingData['frontend_input'] = [
+            'Text Swatch' => 'swatch_text',
+        ];
+    }
+
+    /**
+     * Re-map options from default options structure to swatches structure,
+     * as swatches was initially created with name convention differ from other attributes.
+     *
+     * @param array $data
+     * @return array
+     */
+    protected function changeStructureOfTheData(array $data)
+    {
+        /** @var array $data */
+        $data = parent::changeStructureOfTheData($data);
+        $data['optiontext'] = $data['option'];
+        $data['swatchtext'] = [
+            'value' => $data['option']['value'],
+        ];
+
+        unset($data['option']);
+
+        return $data;
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/SwatchProductAttributeInterface.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/SwatchProductAttributeInterface.php
new file mode 100644
index 0000000000000..41fdebdd5ce8b
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Handler/SwatchProductAttribute/SwatchProductAttributeInterface.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\Handler\SwatchProductAttribute;
+
+use Magento\Mtf\Handler\HandlerInterface;
+
+/**
+ * Interface for swatch specific Curl calls
+ */
+interface SwatchProductAttributeInterface extends HandlerInterface
+{
+    //
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Category/CatalogCategoryView.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Category/CatalogCategoryView.xml
new file mode 100644
index 0000000000000..29eb4c6ff7a8c
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Category/CatalogCategoryView.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../vendor/magento/mtf/etc/pages.xsd">
+    <page name="CatalogCategoryView" area="Category" mca="catalog/category/view" module="Magento_Catalog">
+        <block name="listSwatchesProductBlock" class="Magento\Swatches\Test\Block\Product\ListProduct" locator=".products.wrapper.grid" strategy="css selector" />
+    </page>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Product/CatalogProductView.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Product/CatalogProductView.xml
new file mode 100644
index 0000000000000..315c6a02ee968
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Page/Product/CatalogProductView.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../vendor/magento/mtf/etc/pages.xsd">
+    <page name="CatalogProductView" area="Product" mca="catalog/product/view">
+        <block name="productViewWithSwatchesBlock" class="Magento\Swatches\Test\Block\Product\ViewWithSwatches" locator="#maincontent" strategy="css selector" />
+    </page>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct.xml
new file mode 100644
index 0000000000000..9c85148447400
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/Magento/Mtf/Repository/etc/repository.xsd">
+    <repository class="Magento\ConfigurableProduct\Test\Repository\ConfigurableProduct">
+        <dataset name="product_with_text_swatch">
+            <field name="name" xsi:type="string">Test configurable product with color and size %isolation%</field>
+            <field name="sku" xsi:type="string">sku_test_configurable_product_%isolation%</field>
+            <field name="product_has_weight" xsi:type="string">This item has weight</field>
+            <field name="weight" xsi:type="string">30</field>
+            <field name="status" xsi:type="string">Product online</field>
+            <field name="visibility" xsi:type="string">Catalog, Search</field>
+            <field name="tax_class_id" xsi:type="array">
+                <item name="dataset" xsi:type="string">taxable_goods</item>
+            </field>
+            <field name="url_key" xsi:type="string">configurable-product-%isolation%</field>
+            <field name="configurable_attributes_data" xsi:type="array">
+                <item name="dataset" xsi:type="string">text_swatch</item>
+            </field>
+            <field name="quantity_and_stock_status" xsi:type="array">
+                <item name="is_in_stock" xsi:type="string">In Stock</item>
+            </field>
+            <field name="category_ids" xsi:type="array">
+                <item name="dataset" xsi:type="string">default_subcategory</item>
+            </field>
+            <field name="website_ids" xsi:type="array">
+                <item name="0" xsi:type="string">Main Website</item>
+            </field>
+            <field name="attribute_set_id" xsi:type="array">
+                <item name="dataset" xsi:type="string">custom_attribute_set</item>
+            </field>
+            <field name="price" xsi:type="array">
+                <item name="value" xsi:type="string">40</item>
+                <item name="dataset" xsi:type="string">price_40</item>
+            </field>
+            <field name="checkout_data" xsi:type="array">
+                <item name="dataset" xsi:type="string">two_text_swatches</item>
+            </field>
+        </dataset>
+        <dataset name="product_with_text_swatch_and_size">
+            <field name="name" xsi:type="string">Test configurable product with color and size %isolation%</field>
+            <field name="sku" xsi:type="string">sku_test_configurable_product_%isolation%</field>
+            <field name="product_has_weight" xsi:type="string">This item has weight</field>
+            <field name="weight" xsi:type="string">30</field>
+            <field name="status" xsi:type="string">Product online</field>
+            <field name="visibility" xsi:type="string">Catalog, Search</field>
+            <field name="tax_class_id" xsi:type="array">
+                <item name="dataset" xsi:type="string">taxable_goods</item>
+            </field>
+            <field name="url_key" xsi:type="string">configurable-product-%isolation%</field>
+            <field name="configurable_attributes_data" xsi:type="array">
+                <item name="dataset" xsi:type="string">text_swatch_with_dropdown</item>
+            </field>
+            <field name="quantity_and_stock_status" xsi:type="array">
+                <item name="is_in_stock" xsi:type="string">In Stock</item>
+            </field>
+            <field name="category_ids" xsi:type="array">
+                <item name="dataset" xsi:type="string">default_subcategory</item>
+            </field>
+            <field name="website_ids" xsi:type="array">
+                <item name="0" xsi:type="string">Main Website</item>
+            </field>
+            <field name="attribute_set_id" xsi:type="array">
+                <item name="dataset" xsi:type="string">custom_attribute_set</item>
+            </field>
+            <field name="price" xsi:type="array">
+                <item name="value" xsi:type="string">40</item>
+                <item name="dataset" xsi:type="string">price_40</item>
+            </field>
+            <field name="checkout_data" xsi:type="array">
+                <item name="dataset" xsi:type="string">swatches_with_dropdown</item>
+            </field>
+        </dataset>
+    </repository>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/CheckoutData.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/CheckoutData.xml
new file mode 100644
index 0000000000000..9b369d5a536f0
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/CheckoutData.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../vendor/magento/mtf/Magento/Mtf/Repository/etc/repository.xsd">
+    <repository class="Magento\ConfigurableProduct\Test\Repository\ConfigurableProduct\CheckoutData">
+        <dataset name="two_text_swatches">
+            <field name="options" xsi:type="array">
+                <item name="configurable_options" xsi:type="array">
+                    <item name="0" xsi:type="array">
+                        <item name="title" xsi:type="string">attribute_key_0</item>
+                        <item name="value" xsi:type="string">option_key_1</item>
+                    </item>
+                    <item name="1" xsi:type="array">
+                        <item name="title" xsi:type="string">attribute_key_1</item>
+                        <item name="value" xsi:type="string">option_key_2</item>
+                    </item>
+                </item>
+            </field>
+            <field name="qty" xsi:type="string">1</field>
+            <field name="cartItem" xsi:type="array">
+                <item name="price" xsi:type="string">42</item>
+                <item name="qty" xsi:type="string">1</item>
+                <item name="subtotal" xsi:type="string">47</item>
+            </field>
+        </dataset>
+        <dataset name="swatches_with_dropdown">
+            <field name="options" xsi:type="array">
+                <item name="configurable_options" xsi:type="array">
+                    <item name="0" xsi:type="array">
+                        <item name="title" xsi:type="string">attribute_key_0</item>
+                        <item name="value" xsi:type="string">option_key_1</item>
+                    </item>
+                </item>
+            </field>
+            <field name="qty" xsi:type="string">1</field>
+            <field name="cartItem" xsi:type="array">
+                <item name="price" xsi:type="string">42</item>
+                <item name="qty" xsi:type="string">1</item>
+                <item name="subtotal" xsi:type="string">47</item>
+            </field>
+        </dataset>
+    </repository>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/ConfigurableAttributesData.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/ConfigurableAttributesData.xml
new file mode 100644
index 0000000000000..492fda6b751c6
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/ConfigurableProduct/ConfigurableAttributesData.xml
@@ -0,0 +1,151 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../vendor/magento/mtf/Magento/Mtf/Repository/etc/repository.xsd">
+    <repository class="Magento\ConfigurableProduct\Test\Repository\ConfigurableProduct\ConfigurableAttributesData">
+        <dataset name="text_swatch">
+            <field name="attributes_data" xsi:type="array">
+                <item name="attribute_key_0" xsi:type="array">
+                    <item name="options" xsi:type="array">
+                        <item name="option_key_0" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">12.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_1" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">20.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_2" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">18.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                    </item>
+                </item>
+                <item name="attribute_key_1" xsi:type="array">
+                    <item name="options" xsi:type="array">
+                        <item name="option_key_0" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">42.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_1" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">40.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_2" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">48.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                    </item>
+                </item>
+            </field>
+            <field name="attributes" xsi:type="array">
+                <item name="attribute_key_0" xsi:type="string">swatchesProductAttribute::attribute_type_text_swatch</item>
+                <item name="attribute_key_1" xsi:type="string">swatchesProductAttribute::attribute_type_text_swatch</item>
+            </field>
+            <field name="matrix" xsi:type="array">
+                <item name="attribute_key_0:option_key_0 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_0 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_0 attribute_key_1:option_key_2" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_1 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_1 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_1 attribute_key_1:option_key_2" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_2 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_2 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_2 attribute_key_1:option_key_2" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+            </field>
+        </dataset>
+        <dataset name="text_swatch_with_dropdown">
+            <field name="attributes_data" xsi:type="array">
+                <item name="attribute_key_0" xsi:type="array">
+                    <item name="options" xsi:type="array">
+                        <item name="option_key_0" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">12.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_1" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">20.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_2" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">18.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                    </item>
+                </item>
+                <item name="attribute_key_1" xsi:type="array">
+                    <item name="options" xsi:type="array">
+                        <item name="option_key_0" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">42.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                        <item name="option_key_1" xsi:type="array">
+                            <item name="pricing_value" xsi:type="string">40.00</item>
+                            <item name="include" xsi:type="string">Yes</item>
+                        </item>
+                    </item>
+                </item>
+            </field>
+            <field name="attributes" xsi:type="array">
+                <item name="attribute_key_0" xsi:type="string">swatchesProductAttribute::attribute_type_text_swatch</item>
+                <item name="attribute_key_1" xsi:type="string">catalogProductAttribute::size</item>
+            </field>
+            <field name="matrix" xsi:type="array">
+                <item name="attribute_key_0:option_key_0 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_0 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_1 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_1 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_2 attribute_key_1:option_key_0" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+                <item name="attribute_key_0:option_key_2 attribute_key_1:option_key_1" xsi:type="array">
+                    <item name="qty" xsi:type="string">10</item>
+                    <item name="weight" xsi:type="string">1</item>
+                </item>
+            </field>
+        </dataset>
+    </repository>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/SwatchProductAttribute.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/SwatchProductAttribute.xml
new file mode 100644
index 0000000000000..fc92146861d1e
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/Repository/SwatchProductAttribute.xml
@@ -0,0 +1,35 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/Magento/Mtf/Repository/etc/repository.xsd">
+    <repository class="Magento\Swatches\Test\Repository\SwatchProductAttribute">
+        <dataset name="attribute_type_text_swatch">
+            <field name="attribute_code" xsi:type="string">sw_color%isolation%</field>
+            <field name="frontend_input" xsi:type="string" >Text Swatch</field>
+            <field name="frontend_label" xsi:type="string" >Text Swatch</field>
+            <field name="options" xsi:type="array">
+                <item name="0" xsi:type="array">
+                    <item name="is_default" xsi:type="string">No</item>
+                    <item name="admin" xsi:type="string">R</item>
+                    <item name="view" xsi:type="string">R</item>
+                </item>
+                <item name="1" xsi:type="array">
+                    <item name="is_default" xsi:type="string">No</item>
+                    <item name="admin" xsi:type="string">G</item>
+                    <item name="view" xsi:type="string">G</item>
+                </item>
+                <item name="2" xsi:type="array">
+                    <item name="is_default" xsi:type="string">No</item>
+                    <item name="admin" xsi:type="string">B</item>
+                    <item name="view" xsi:type="string">B</item>
+                </item>
+            </field>
+            <field name="is_global" xsi:type="string">Global</field>
+            <field name="used_in_product_listing" xsi:type="string">Yes</field>
+        </dataset>
+    </repository>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.php
new file mode 100644
index 0000000000000..2eb41e0ccc2be
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\TestCase;
+
+use Magento\Mtf\TestCase\Scenario;
+
+/**
+ * Preconditions:
+ * 1. Configure text swatch attribute.
+ * 2. Create configurable product with this attribute
+ * 3. Open it on catalog page
+ * 4. Click on 'Add to Cart' button
+ * Steps:
+ * 1. Go to Frontend.
+ * 2. Open category page with created product
+ * 3. Click on 'Add to Cart' button
+ * 4. Perform asserts
+ *
+ * @group Configurable_Product
+ * @ZephyrId MAGETWO-59958
+ */
+class AddConfigurableProductWithSwatchToShoppingCartTest extends Scenario
+{
+    /**
+     * Runs add configurable product with swatches attributes test.
+     *
+     * @return void
+     */
+    public function test()
+    {
+        $this->executeScenario();
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.xml
new file mode 100644
index 0000000000000..581c754d8f6cc
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/AddConfigurableProductWithSwatchToShoppingCartTest.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/etc/variations.xsd">
+    <testCase name="Magento\Swatches\Test\TestCase\AddConfigurableProductWithSwatchToShoppingCartTest" summary="Create text swatch attribute" ticketId="MAGETWO-59958">
+        <variation name="AddConfigurableProductWithSwatchToShoppingCartTest1">
+            <data name="attributeTypeAction" xsi:type="string">addOptions</data>
+            <data name="product" xsi:type="string">configurableProductSwatch::product_with_text_swatch</data>
+            <constraint name="Magento\Checkout\Test\Constraint\AssertCartItemsOptions" />
+        </variation>
+    </testCase>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.php
new file mode 100644
index 0000000000000..7734f023037a8
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\TestCase;
+
+use Magento\Mtf\TestCase\Scenario;
+
+/**
+ * Preconditions:
+ * 1. Configure text swatch attribute.
+ * 2. Create configurable product with this attribute
+ * 3. Open it on catalog page
+ * 4. Click on 'Add to Cart' button
+ * Steps:
+ * 1. Go to Frontend.
+ * 2. Open category page with created product
+ * 3. Click on 'Add to Cart' button
+ * 4. Perform asserts
+ *
+ * @group Configurable_Product
+ * @ZephyrId MAGETWO-59979
+ */
+class TryToAddConfigurableProductWithSwatchToShoppingCartTest extends Scenario
+{
+    /**
+     * Runs add configurable product with swatches attributes test.
+     *
+     * @return void
+     */
+    public function test()
+    {
+        $this->executeScenario();
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.xml
new file mode 100644
index 0000000000000..f3b59dfe4113b
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestCase/TryToAddConfigurableProductWithSwatchToShoppingCartTest.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+ -->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/etc/variations.xsd">
+    <testCase name="Magento\Swatches\Test\TestCase\TryToAddConfigurableProductWithSwatchToShoppingCartTest" summary="Create text swatch attribute" ticketId="MAGETWO-59979">
+        <variation name="TryToAddConfigurableProductWithSwatchToShoppingCartTest1">
+            <data name="attributeTypeAction" xsi:type="string">addOptions</data>
+            <data name="product" xsi:type="string">configurableProductSwatch::product_with_text_swatch_and_size</data>
+            <constraint name="Magento\Swatches\Test\Constraint\AssertSwatchConfigurableProductPage" />
+        </variation>
+    </testCase>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/TestStep/AddProductToCartFromCatalogCategoryPageStep.php b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestStep/AddProductToCartFromCatalogCategoryPageStep.php
new file mode 100644
index 0000000000000..98790d1badd3c
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/TestStep/AddProductToCartFromCatalogCategoryPageStep.php
@@ -0,0 +1,102 @@
+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Swatches\Test\TestStep;
+
+use Magento\Catalog\Test\Page\Category\CatalogCategoryView;
+use Magento\Cms\Test\Page\CmsIndex;
+use Magento\Mtf\Fixture\FixtureFactory;
+use Magento\Mtf\Fixture\InjectableFixture;
+use Magento\Mtf\TestStep\TestStepInterface;
+use Magento\Swatches\Test\Block\Product\ListProduct;
+use Magento\Swatches\Test\Block\Product\ProductList\ProductItem;
+use Magento\Swatches\Test\Fixture\ConfigurableProduct;
+
+/**
+ * Add configurable product to cart.
+ */
+class AddProductToCartFromCatalogCategoryPageStep implements TestStepInterface
+{
+    /**
+     * Fixture of configurable product with swatches configuration.
+     *
+     * @var ConfigurableProduct
+     */
+    private $product;
+
+    /**
+     * Fixture factory for create/get fixtures.
+     *
+     * @var FixtureFactory
+     */
+    private $fixtureFactory;
+
+    /**
+     * Page of catalog category view.
+     *
+     * @var CatalogCategoryView
+     */
+    private $categoryView;
+
+    /**
+     * CMS index page.
+     *
+     * @var CmsIndex
+     */
+    private $cmsIndex;
+
+    /**
+     * @constructor
+     * @param FixtureFactory $fixtureFactory
+     * @param CmsIndex $cmsIndex
+     * @param CatalogCategoryView $categoryView
+     * @param InjectableFixture $product
+     */
+    public function __construct(
+        FixtureFactory $fixtureFactory,
+        CmsIndex $cmsIndex,
+        CatalogCategoryView $categoryView,
+        InjectableFixture $product
+    ) {
+        $this->fixtureFactory = $fixtureFactory;
+        $this->cmsIndex = $cmsIndex;
+        $this->categoryView = $categoryView;
+        $this->product = $product;
+    }
+
+    /**
+     * Update configurable product.
+     *
+     * @return array
+     */
+    public function run()
+    {
+        /** @var string $categoryName */
+        $categoryName = $this->product->getCategoryIds()[0];
+
+        $this->cmsIndex->open();
+        $this->cmsIndex->getTopmenu()->selectCategoryByName($categoryName);
+
+        /** @var  ListProduct $productsList */
+        $productsList = $this->categoryView->getListSwatchesProductBlock();
+
+        /** @var ProductItem $productItemBlock */
+        $productItemBlock = $productsList->getProductItem($this->product);
+        $productItemBlock->fillData($this->product);
+        $productItemBlock->clickAddToCart();
+        $cart = [
+            'data' => [
+                'items' => [
+                    'products' => [$this->product],
+                ],
+            ],
+        ];
+
+        return [
+            'cart' => $this->fixtureFactory->createByCode('cart', $cart),
+        ];
+    }
+}
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/curl/di.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/curl/di.xml
new file mode 100644
index 0000000000000..71c5c9b9b6ac9
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/curl/di.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" ?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <preference for="Magento\Swatches\Test\Handler\SwatchProductAttribute\SwatchProductAttributeInterface"
+                type="\Magento\Swatches\Test\Handler\SwatchProductAttribute\Curl"/>
+</config>
diff --git a/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/testcase.xml b/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/testcase.xml
new file mode 100644
index 0000000000000..1b91cacc89cda
--- /dev/null
+++ b/dev/tests/functional/tests/app/Magento/Swatches/Test/etc/testcase.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../vendor/magento/mtf/Magento/Mtf/TestCase/etc/testcase.xsd">
+    <scenario name="AddConfigurableProductWithSwatchToShoppingCartTest" firstStep="createProduct">
+        <step name="createProduct" module="Magento_Catalog" next="addProductToCartFromCatalogCategoryPage" />
+        <step name="addProductToCartFromCatalogCategoryPage" module="Magento_Swatches" />
+    </scenario>
+
+    <scenario name="TryToAddConfigurableProductWithSwatchToShoppingCartTest" firstStep="createProduct">
+        <step name="createProduct" module="Magento_Catalog" />
+    </scenario>
+</config>