diff --git a/src/Sylius/Behat/Page/Shop/Account/RequestPasswordResetPage.php b/src/Sylius/Behat/Page/Shop/Account/RequestPasswordResetPage.php
index 9b949e3ad30..fc26cd77e21 100644
--- a/src/Sylius/Behat/Page/Shop/Account/RequestPasswordResetPage.php
+++ b/src/Sylius/Behat/Page/Shop/Account/RequestPasswordResetPage.php
@@ -28,10 +28,10 @@ public function getRouteName(): string
      */
     public function checkValidationMessageFor(string $element, string $message): bool
     {
-        $errorLabel = $this->getElement($element)->getParent()->find('css', '[data-test-sylius-validation-error]');
+        $errorLabel = $this->getElement($element)->getParent()->find('css', '[data-test-validation-error]');
 
         if (null === $errorLabel) {
-            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-sylius-validation-error]');
+            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-validation-error]');
         }
 
         return $message === $errorLabel->getText();
diff --git a/src/Sylius/Behat/Page/Shop/Account/ResetPasswordPage.php b/src/Sylius/Behat/Page/Shop/Account/ResetPasswordPage.php
index 8f4edadc867..bb253828575 100644
--- a/src/Sylius/Behat/Page/Shop/Account/ResetPasswordPage.php
+++ b/src/Sylius/Behat/Page/Shop/Account/ResetPasswordPage.php
@@ -40,10 +40,10 @@ public function specifyConfirmPassword(string $password): void
 
     public function checkValidationMessageFor(string $element, string $message): bool
     {
-        $errorLabel = $this->getElement($element)->getParent()->find('css', '[data-test-sylius-validation-error]');
+        $errorLabel = $this->getElement($element)->getParent()->find('css', '[data-test-validation-error]');
 
         if (null === $errorLabel) {
-            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-sylius-validation-error]');
+            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-validation-error]');
         }
 
         return $message === $errorLabel->getText();
diff --git a/src/Sylius/Behat/Page/Shop/Checkout/AddressPage.php b/src/Sylius/Behat/Page/Shop/Checkout/AddressPage.php
index fb5fda989ce..c6546311c15 100644
--- a/src/Sylius/Behat/Page/Shop/Checkout/AddressPage.php
+++ b/src/Sylius/Behat/Page/Shop/Checkout/AddressPage.php
@@ -70,7 +70,7 @@ public function chooseDifferentBillingAddress(): void
     public function checkInvalidCredentialsValidation(): bool
     {
         $this->getElement('login_password')->waitFor(5, function () {
-            $validationElement = $this->getElement('login_password')->getParent()->find('css', '.red.label');
+            $validationElement = $this->getElement('login_password')->getParent()->find('css', '[data-test-login-errors]');
             if (null === $validationElement) {
                 return false;
             }
@@ -85,12 +85,12 @@ public function checkValidationMessageFor(string $element, string $message): boo
     {
         $foundElement = $this->getFieldElement($element);
         if (null === $foundElement) {
-            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '.sylius-validation-error');
+            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-validation-error]');
         }
 
         $validationMessage = $foundElement->find('css', '.sylius-validation-error');
         if (null === $validationMessage) {
-            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '.sylius-validation-error');
+            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-validation-error]');
         }
 
         return $message === $validationMessage->getText();
@@ -118,7 +118,7 @@ public function selectBillingAddressProvince(string $province): void
         $this->getElement('billing_country_province')->selectOption($province);
     }
 
-    public function specifyEmail(string $email): void
+    public function specifyEmail(?string $email): void
     {
         $this->getElement('customer_email')->setValue($email);
     }
@@ -164,7 +164,7 @@ public function getItemSubtotal(string $itemName): string
 
         $subtotalTable = $this->getElement('checkout_subtotal');
 
-        return $subtotalTable->find('css', sprintf('#sylius-item-%s-subtotal', $itemSlug))->getText();
+        return $subtotalTable->find('css', sprintf('[data-test-item-subtotal="%s"]', $itemSlug))->getText();
     }
 
     public function getShippingAddressCountry(): string
@@ -253,31 +253,31 @@ public function getPreFilledBillingAddress(): AddressInterface
     protected function getDefinedElements(): array
     {
         return array_merge(parent::getDefinedElements(), [
-            'billing_address_book' => '#sylius-billing-address .ui.dropdown',
-            'billing_first_name' => '#sylius_checkout_address_billingAddress_firstName',
-            'billing_last_name' => '#sylius_checkout_address_billingAddress_lastName',
-            'billing_street' => '#sylius_checkout_address_billingAddress_street',
-            'billing_city' => '#sylius_checkout_address_billingAddress_city',
-            'billing_country' => '#sylius_checkout_address_billingAddress_countryCode',
+            'billing_address_book' => '[data-test-billing-address] .ui.dropdown',
+            'billing_city' => '[data-test-billing-city]',
+            'billing_country' => '[data-test-billing-country]',
             'billing_country_province' => '[name="sylius_checkout_address[billingAddress][provinceCode]"]',
-            'billing_postcode' => '#sylius_checkout_address_billingAddress_postcode',
+            'billing_first_name' => '[data-test-billing-first-name]',
+            'billing_last_name' => '[data-test-billing-last-name]',
+            'billing_postcode' => '[data-test-billing-postcode]',
             'billing_province' => '[name="sylius_checkout_address[billingAddress][provinceName]"]',
-            'checkout_subtotal' => '#sylius-checkout-subtotal',
-            'customer_email' => '#sylius_checkout_address_customer_email',
-            'different_billing_address' => '#sylius_checkout_address_differentBillingAddress',
-            'different_billing_address_label' => '#sylius_checkout_address_differentBillingAddress ~ label',
+            'billing_street' => '[data-test-billing-street]',
+            'checkout_subtotal' => '[data-test-checkout-subtotal]',
+            'customer_email' => '[data-test-login-email]',
+            'different_billing_address' => '[data-test-different-billing-address]',
+            'different_billing_address_label' => '[data-test-different-billing-address-label]',
             'login_button' => '#sylius-api-login-submit',
             'login_password' => 'input[type=\'password\']',
-            'next_step' => '#next-step',
-            'shipping_address_book' => '#sylius-shipping-address .ui.dropdown',
-            'shipping_city' => '#sylius_checkout_address_shippingAddress_city',
-            'shipping_country' => '#sylius_checkout_address_shippingAddress_countryCode',
+            'next_step' => '[data-test-next-step]',
+            'shipping_address_book' => '[data-test-address-book]',
+            'shipping_city' => '[data-test-shipping-city]',
+            'shipping_country' => '[data-test-shipping-country]',
             'shipping_country_province' => '[name="sylius_checkout_address[shippingAddress][provinceCode]"]',
-            'shipping_first_name' => '#sylius_checkout_address_shippingAddress_firstName',
-            'shipping_last_name' => '#sylius_checkout_address_shippingAddress_lastName',
-            'shipping_postcode' => '#sylius_checkout_address_shippingAddress_postcode',
+            'shipping_first_name' => '[data-test-shipping-first-name]',
+            'shipping_last_name' => '[data-test-shipping-last-name]',
+            'shipping_postcode' => '[data-test-shipping-postcode]',
             'shipping_province' => '[name="sylius_checkout_address[shippingAddress][provinceName]"]',
-            'shipping_street' => '#sylius_checkout_address_shippingAddress_street',
+            'shipping_street' => '[data-test-shipping-street]',
         ]);
     }
 
diff --git a/src/Sylius/Behat/Page/Shop/Checkout/AddressPageInterface.php b/src/Sylius/Behat/Page/Shop/Checkout/AddressPageInterface.php
index cfa041b80a1..9a4b55539a9 100644
--- a/src/Sylius/Behat/Page/Shop/Checkout/AddressPageInterface.php
+++ b/src/Sylius/Behat/Page/Shop/Checkout/AddressPageInterface.php
@@ -32,7 +32,7 @@ public function specifyBillingAddress(AddressInterface $billingAddress): void;
 
     public function selectBillingAddressProvince(string $province): void;
 
-    public function specifyEmail(string $email): void;
+    public function specifyEmail(?string $email): void;
 
     public function specifyShippingAddressFullName(string $fullName): void;
 
diff --git a/src/Sylius/Behat/Page/Shop/Checkout/SelectShippingPage.php b/src/Sylius/Behat/Page/Shop/Checkout/SelectShippingPage.php
index 57669c2b5f2..c43f83e2cc3 100644
--- a/src/Sylius/Behat/Page/Shop/Checkout/SelectShippingPage.php
+++ b/src/Sylius/Behat/Page/Shop/Checkout/SelectShippingPage.php
@@ -39,7 +39,7 @@ public function selectShippingMethod(string $shippingMethod): void
 
     public function getShippingMethods(): array
     {
-        $inputs = $this->getSession()->getPage()->findAll('css', '#sylius-shipping-methods .item .content label');
+        $inputs = $this->getSession()->getPage()->findAll('css', '[data-test-shipping-method-label]');
 
         $shippingMethods = [];
         foreach ($inputs as $input) {
@@ -51,12 +51,12 @@ public function getShippingMethods(): array
 
     public function getSelectedShippingMethodName(): ?string
     {
-        $shippingMethods = $this->getSession()->getPage()->findAll('css', '#sylius-shipping-methods .item');
+        $shippingMethods = $this->getSession()->getPage()->findAll('css', '[data-test-shipping-item]');
 
         /** @var NodeElement $shippingMethod */
         foreach ($shippingMethods as $shippingMethod) {
             if (null !== $shippingMethod->find('css', 'input:checked')) {
-                return $shippingMethod->find('css', '.content label')->getText();
+                return $shippingMethod->find('css', '[data-test-shipping-method-label]')->getText();
             }
         }
 
@@ -87,7 +87,7 @@ public function getItemSubtotal(string $itemName): string
 
         $subtotalTable = $this->getElement('checkout_subtotal');
 
-        return $subtotalTable->find('css', sprintf('#sylius-item-%s-subtotal', $itemSlug))->getText();
+        return $subtotalTable->find('css', sprintf('[data-test-item-subtotal="%s"]', $itemSlug))->getText();
     }
 
     public function nextStep(): void
@@ -107,7 +107,7 @@ public function changeAddressByStepLabel(): void
 
     public function getPurchaserEmail(): string
     {
-        return $this->getElement('purchaser-email')->getText();
+        return $this->getElement('purchaser_email')->getText();
     }
 
     public function getValidationMessageForShipment(): string
@@ -117,9 +117,9 @@ public function getValidationMessageForShipment(): string
             throw new ElementNotFoundException($this->getSession(), 'Items element');
         }
 
-        $validationMessage = $foundElement->find('css', '.sylius-validation-error');
+        $validationMessage = $foundElement->find('css', '[data-test-validation-error]');
         if (null === $validationMessage) {
-            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '.sylius-validation-error');
+            throw new ElementNotFoundException($this->getSession(), 'Validation message', 'css', '[data-test-validation-error]');
         }
 
         return $validationMessage->getText();
@@ -137,7 +137,7 @@ public function isNextStepButtonUnavailable(): bool
 
     public function hasShippingMethod(string $shippingMethodName): bool
     {
-        $inputs = $this->getSession()->getPage()->findAll('css', '#sylius-shipping-methods .item .content label');
+        $inputs = $this->getSession()->getPage()->findAll('css', '[data-test-shipping-method-label]');
 
         $shippingMethods = [];
         foreach ($inputs as $input) {
@@ -150,17 +150,17 @@ public function hasShippingMethod(string $shippingMethodName): bool
     protected function getDefinedElements(): array
     {
         return array_merge(parent::getDefinedElements(), [
-            'address' => '.steps a:contains("Address")',
-            'checkout_subtotal' => '#sylius-checkout-subtotal',
-            'next_step' => '#next-step',
-            'order_cannot_be_shipped_message' => '#sylius-order-cannot-be-shipped',
-            'purchaser-email' => '#purchaser-email',
-            'shipment' => '.items',
-            'shipping_method' => '[name="sylius_checkout_select_shipping[shipments][0][method]"]',
-            'shipping_method_fee' => '.item:contains("%shipping_method%") .fee',
-            'shipping_method_select' => '.item:contains("%shipping_method%") > .field > .ui.radio.checkbox',
+            'address' => '[data-test-step-address]',
+            'checkout_subtotal' => '[data-test-checkout-subtotal]',
+            'next_step' => '[data-test-next-step]',
+            'order_cannot_be_shipped_message' => '[data-test-order-cannot-be-shipped]',
+            'purchaser_email' => '[data-test-purchaser-name-or-email]',
+            'shipment' => '[data-test-shipments]',
+            'shipping_method' => '[data-test-shipping-method-select]',
+            'shipping_method_fee' => '[data-test-shipping-item]:contains("%shipping_method%") [data-test-shipping-method-fee]',
+            'shipping_method_select' => '[data-test-shipping-item]:contains("%shipping_method%") > .field > .ui.radio.checkbox',
             'shipping_method_option' => '.item:contains("%shipping_method%") input',
-            'warning_no_shipping_methods' => '#sylius-order-cannot-be-shipped',
+            'warning_no_shipping_methods' => '[data-test-order-cannot-be-shipped]',
         ]);
     }
 }
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_addressBookSelect.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_addressBookSelect.html.twig
index 551741499f7..67a1db8c9c1 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_addressBookSelect.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_addressBookSelect.html.twig
@@ -1,5 +1,5 @@
 {% if app.user is not empty and app.user.customer is not empty and app.user.customer.addresses|length > 0 %}
-    <div class="ui fluid floating dropdown labeled search icon button address-book-select">
+    <div class="ui fluid floating dropdown labeled search icon button address-book-select" {{ sylius_test_html_attribute('address-book') }}>
         <i class="book icon"></i>
         <span class="text">{{ 'sylius.ui.select_address_from_book'|trans }}</span>
         <div class="menu">
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_form.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_form.html.twig
index 8eb2613815c..888dcc18df4 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_form.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_form.html.twig
@@ -1,20 +1,20 @@
-<div id="sylius-shipping-address">
+<div id="sylius-shipping-address" {{ sylius_test_html_attribute('shipping-address') }}>
     {% include '@SyliusShop/Checkout/Address/_addressBookSelect.html.twig' %}
     <h3 class="ui dividing header">{{ 'sylius.ui.shipping_address'|trans }}</h3>
     {% if form.customer is defined %}
         {% include '@SyliusShop/Common/Form/_login.html.twig' with {'form': form.customer} %}
     {% endif %}
-    {% include '@SyliusShop/Common/Form/_address.html.twig' with {'form': form.shippingAddress, 'order': order} %}
-    {{ form_row(form.differentBillingAddress, {'attr': {'data-toggles': 'sylius-billing-address'}}) }}
+    {% include '@SyliusShop/Common/Form/_address.html.twig' with {'form': form.shippingAddress, 'order': order, 'type': 'shipping'} %}
+    {{ form_row(form.differentBillingAddress,sylius_test_form_attribute('different-billing-address')|sylius_merge_recursive({'attr': {'data-toggles': 'sylius-billing-address'}, 'label_attr': {'data-test-different-billing-address-label': ''}} )) }}
 
     {{ sonata_block_render_event('sylius.shop.checkout.address.shipping_address_form', {'order': order}) }}
 </div>
 
-<div id="sylius-billing-address">
+<div id="sylius-billing-address" {{ sylius_test_html_attribute('billing-address') }}>
     <div class="ui hidden divider"></div>
     {% include '@SyliusShop/Checkout/Address/_addressBookSelect.html.twig' %}
     <h3 class="ui dividing header">{{ 'sylius.ui.billing_address'|trans }}</h3>
-    {% include '@SyliusShop/Common/Form/_address.html.twig' with {'form': form.billingAddress, 'order': order} %}
+    {% include '@SyliusShop/Common/Form/_address.html.twig' with {'form': form.billingAddress, 'order': order, 'type': 'billing'} %}
 
     {{ sonata_block_render_event('sylius.shop.checkout.address.billing_address_form', {'order': order}) }}
 </div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_navigation.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_navigation.html.twig
index e6eae183113..323c53e7f3c 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_navigation.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/Address/_navigation.html.twig
@@ -3,6 +3,6 @@
         <a href="{{ path('sylius_shop_homepage') }}" class="ui large icon labeled button"><i class="arrow left icon"></i> {{ 'sylius.ui.back_to_store'|trans }}</a>
     </div>
     <div class="right aligned column">
-        <button type="submit" id="next-step" class="ui large primary icon labeled button"><i class="arrow right icon"></i> {{ 'sylius.ui.next'|trans }}</button>
+        <button type="submit" id="next-step" class="ui large primary icon labeled button" {{ sylius_test_html_attribute('next-step') }}><i class="arrow right icon"></i> {{ 'sylius.ui.next'|trans }}</button>
     </div>
 </div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectPayment/_navigation.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectPayment/_navigation.html.twig
index 7efbe986278..1475032405a 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectPayment/_navigation.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectPayment/_navigation.html.twig
@@ -9,7 +9,7 @@
         {% endif %}
     </div>
     <div class="right aligned column">
-        <button type="submit" id="next-step" class="ui large primary icon labeled{% if not enabled %} disabled{% endif %} button">
+        <button type="submit" id="next-step" class="ui large primary icon labeled{% if not enabled %} disabled{% endif %} button" {{ sylius_test_html_attribute('next-step') }}>
             <i class="arrow right icon"></i>
             {{ 'sylius.ui.next'|trans }}
         </button>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_choice.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_choice.html.twig
index 7a59eb496fd..765a99ed5e4 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_choice.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_choice.html.twig
@@ -1,13 +1,13 @@
 {% import '@SyliusShop/Common/Macro/money.html.twig' as money %}
 
-<div class="item">
+<div class="item" {{ sylius_test_html_attribute('shipping-item') }}>
     <div class="field">
         <div class="ui radio checkbox">
-            {{ form_widget(form) }}
+            {{ form_widget(form, sylius_test_form_attribute('shipping-method-select')) }}
         </div>
     </div>
     <div class="content">
-        <a class="header">{{ form_label(form) }}</a>
+        <a class="header" {{ sylius_test_html_attribute('shipping-method-label') }}>{{ form_label(form) }}</a>
         {% if method.description is not null %}
             <div class="description">
                 <p>{{ method.description }}</p>
@@ -15,7 +15,7 @@
         {% endif %}
     </div>
     <div class="extra">
-        <div class="ui large right floated fee label">
+        <div class="ui large right floated fee label" {{ sylius_test_html_attribute('shipping-method-fee') }}>
             {{ money.convertAndFormat(fee) }}
         </div>
     </div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_navigation.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_navigation.html.twig
index 73237804378..8e86515b445 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_navigation.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_navigation.html.twig
@@ -5,7 +5,7 @@
         <a href="{{ path('sylius_shop_checkout_address') }}" class="ui large icon labeled button"><i class="arrow left icon"></i> {{ 'sylius.ui.change_address'|trans }}</a>
     </div>
     <div class="right aligned column">
-        <button type="submit" id="next-step" class="ui large primary icon labeled{% if not enabled %} disabled{% endif %} button">
+        <button type="submit" id="next-step" class="ui large primary icon labeled{% if not enabled %} disabled{% endif %} button" {{ sylius_test_html_attribute('next-step') }}>
             <i class="arrow right icon"></i>
             {{ 'sylius.ui.next'|trans }}
         </button>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_shipment.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_shipment.html.twig
index 5c5b8beea80..988837bf6f7 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_shipment.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_shipment.html.twig
@@ -1,6 +1,6 @@
 <div class="ui segment">
     <div class="ui dividing header">{{ 'sylius.ui.shipment'|trans }} #{{ loop.index }}</div>
-    <div class="ui fluid stackable items">
+    <div class="ui fluid stackable items" {{ sylius_test_html_attribute('shipments') }}>
         {{ form_errors(form.method) }}
 
         {% for key, choice_form in form.method %}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_unavailable.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_unavailable.html.twig
index 6291deb845c..64528b3d03a 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_unavailable.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/SelectShipping/_unavailable.html.twig
@@ -1,4 +1,4 @@
-<div class="ui icon message" id="sylius-order-cannot-be-shipped">
+<div class="ui icon message" id="sylius-order-cannot-be-shipped" {{ sylius_test_html_attribute('order-cannot-be-shipped') }}>
     <i class="warning sign icon"></i>
     <div class="content">
         <div class="header">{{ 'sylius.ui.warning'|trans }}</div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_header.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_header.html.twig
index ddee576bd3c..3497b547dc2 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_header.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_header.html.twig
@@ -5,7 +5,7 @@
         </div>
         <div class="right menu">
             {% if order.customer.id|default(null) is not null %}
-                <div class="item" id="purchaser-email">{{ 'sylius.ui.checking_out_as'|trans }} {{ order.customer.fullName|default(order.customer.email) }}.</div>
+                <div class="item" id="purchaser-email" {{ sylius_test_html_attribute('purchaser-name-or-email') }}>{{ 'sylius.ui.checking_out_as'|trans }} {{ order.customer.fullName|default(order.customer.email) }}.</div>
             {% else %}
                 <a href="{{ path('sylius_shop_login') }}" class="item">{{ 'sylius.ui.sign_in'|trans }}</a>
             {% endif %}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_steps.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_steps.html.twig
index b7016dfed95..57dd56cd0f3 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_steps.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_steps.html.twig
@@ -19,7 +19,7 @@
 {% endif %}
 
 <div class="ui {{ steps_count }} steps">
-    <a class="{{ steps['address'] }} step" href="{{ path('sylius_shop_checkout_address') }}">
+    <a class="{{ steps['address'] }} step" href="{{ path('sylius_shop_checkout_address') }}" {{ sylius_test_html_attribute('step-address') }}>
         <i class="map icon"></i>
         <div class="content">
             <div class="title">{{ 'sylius.ui.address'|trans }}</div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_summary.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_summary.html.twig
index e793b567f38..3f355cdd734 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_summary.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Checkout/_summary.html.twig
@@ -5,7 +5,7 @@
 {% set taxExcluded = sylius_order_tax_excluded(order) %}
 
 <div class="ui segment">
-    <table class="ui very basic table" id="sylius-checkout-subtotal">
+    <table class="ui very basic table" id="sylius-checkout-subtotal" {{ sylius_test_html_attribute('checkout-subtotal') }}>
         <thead>
         <tr>
             <th class="sylius-table-column-item">{{ 'sylius.ui.item'|trans }}</th>
@@ -20,7 +20,9 @@
                 <td class="center aligned">
                     {{ item.quantity }}
                 </td>
-                <td class="right aligned" id="sylius-item-{{ item.variant.product.slug }}-subtotal">{{ money.convertAndFormat(item.subtotal) }}</td>
+                <td class="right aligned" id="sylius-item-{{ item.variant.product.slug }}-subtotal" {{ sylius_test_html_attribute('item-subtotal', item.variant.product.slug) }}>
+                    {{ money.convertAndFormat(item.subtotal) }}
+                </td>
             </tr>
         {% endfor %}
         </tbody>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_address.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_address.html.twig
index 7effbd38fee..3125d7d6496 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_address.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_address.html.twig
@@ -1,9 +1,13 @@
+{% if type is not defined %}
+     {% set type = null %}
+{% endif %}
+
 <div class="two fields">
-    {{ form_row(form.firstName) }}
-    {{ form_row(form.lastName) }}
+    {{ form_row(form.firstName, sylius_test_form_attribute(type ~ '-first-name')) }}
+    {{ form_row(form.lastName, sylius_test_form_attribute(type ~ '-last-name')) }}
 </div>
-{{ form_row(form.company) }}
-{{ form_row(form.street) }}
+{{ form_row(form.company, sylius_test_form_attribute(type ~ '-company')) }}
+{{ form_row(form.street, sylius_test_form_attribute(type ~ '-street')) }}
 
 {% include '@SyliusShop/Common/Form/_countryCode.html.twig' with {'form': form.countryCode} %}
 
@@ -20,7 +24,7 @@
 {% endif %}
 
 <div class="two fields">
-    {{ form_row(form.city) }}
-    {{ form_row(form.postcode) }}
+    {{ form_row(form.city, sylius_test_form_attribute(type ~ '-city')) }}
+    {{ form_row(form.postcode, sylius_test_form_attribute(type ~ '-postcode')) }}
 </div>
 {{ form_row(form.phoneNumber) }}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_countryCode.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_countryCode.html.twig
index baa2eb95c7a..97e4ebe5409 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_countryCode.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_countryCode.html.twig
@@ -1,5 +1,5 @@
 {% if form.vars.choices|length == 1 %}
-    {{ form_row(form, {'value': form.vars.choices[0].value}) }}
+    {{ form_row(form, sylius_test_form_attribute(type ~ '-country')|merge({'value': form.vars.choices[0].value})) }}
 {% else %}
-    {{ form_row(form) }}
+    {{ form_row(form, sylius_test_form_attribute(type ~ '-country')) }}
 {% endif %}
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_login.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_login.html.twig
index 4ea08b3adeb..c9938213a05 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_login.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Common/Form/_login.html.twig
@@ -1,6 +1,7 @@
 <div class="one field" id="sylius-api-login">
-    {{ form_errors(form.email) }}
-    {{ form_row(form.email, {'attr': {'data-url': path('sylius_shop_ajax_user_check_action')}}) }}
+    {{ form_errors(form.email, sylius_test_form_attribute('login-errors')) }}
+    {% set path = path('sylius_shop_ajax_user_check_action')  %}
+    {{ form_row(form.email, sylius_test_form_attribute('login-email')|sylius_merge_recursive({'attr': {'data-url': path}})) }}
 
     <div class="ui action input" id="sylius-api-login-form">
         <input type="password" placeholder="{{ 'sylius.ui.password'|trans }}">
diff --git a/src/Sylius/Bundle/UiBundle/Resources/config/services/twig.xml b/src/Sylius/Bundle/UiBundle/Resources/config/services/twig.xml
index d8397c92073..877e3694137 100644
--- a/src/Sylius/Bundle/UiBundle/Resources/config/services/twig.xml
+++ b/src/Sylius/Bundle/UiBundle/Resources/config/services/twig.xml
@@ -38,5 +38,9 @@
             <argument type="collection" />
             <tag name="twig.extension" />
         </service>
+
+        <service id="sylius.twig.extension.merge_recursive" class="Sylius\Bundle\UiBundle\Twig\MergeRecursiveExtension">
+            <tag name="twig.extension" />
+        </service>
     </services>
 </container>
diff --git a/src/Sylius/Bundle/UiBundle/Resources/views/Form/theme.html.twig b/src/Sylius/Bundle/UiBundle/Resources/views/Form/theme.html.twig
index 51cae4f55c4..ba1b9a87f26 100644
--- a/src/Sylius/Bundle/UiBundle/Resources/views/Form/theme.html.twig
+++ b/src/Sylius/Bundle/UiBundle/Resources/views/Form/theme.html.twig
@@ -11,7 +11,7 @@
 {%- block form_errors -%}
     {%- if errors|length > 0 -%}
         {%- for error in errors -%}
-            <div class="ui red {% if form.parent is not empty %}pointing {% endif %}label sylius-validation-error" {{ sylius_test_html_attribute('sylius-validation-error') }} {% if form.parent is empty %} style="margin-bottom: 10px;"{% endif %}>
+            <div class="ui red {% if form.parent is not empty %}pointing {% endif %}label sylius-validation-error" {{ sylius_test_html_attribute('validation-error') }} {% if form.parent is empty %} style="margin-bottom: 10px;"{% endif %}>
                 {{ error.message }}
             </div>
         {%- endfor -%}
diff --git a/src/Sylius/Bundle/UiBundle/Twig/MergeRecursiveExtension.php b/src/Sylius/Bundle/UiBundle/Twig/MergeRecursiveExtension.php
new file mode 100644
index 00000000000..e1675be720e
--- /dev/null
+++ b/src/Sylius/Bundle/UiBundle/Twig/MergeRecursiveExtension.php
@@ -0,0 +1,32 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Paweł Jędrzejewski
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\UiBundle\Twig;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFilter;
+
+final class MergeRecursiveExtension extends AbstractExtension
+{
+    public function  getFilters(): array
+    {
+        return [
+            new TwigFilter(
+                'sylius_merge_recursive',
+                function (array $firstArray, array $secondArray): array {
+                    return array_merge_recursive($firstArray, $secondArray);
+                }
+            ),
+        ];
+    }
+}