Migrate remaining VPN Selenium tests to Playwright (#14904)

mozilla · Sep 30, 2024 · 83a8df6 · 83a8df6
1 parent 83cdddb
commit 83a8df6
Show file tree

Hide file tree

Showing 20 changed files with 437 additions and 403 deletions.
diff --git a/bedrock/products/templates/products/vpn/includes/macros.html b/bedrock/products/templates/products/vpn/includes/macros.html
@@ -96,14 +96,14 @@ <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
 
 {% macro vpn_conditional_cta(position) -%}
   {% if vpn_available %}
-    <a class="mzp-c-button mzp-t-xl" href="#pricing" data-cta-type="button" data-cta-text="Scroll to pricing" data-cta-position="{{ position }}">
+    <a class="mzp-c-button mzp-t-xl" href="#pricing" data-cta-type="button" data-cta-text="Scroll to pricing" data-cta-position="{{ position }}" data-testid="get-mozilla-vpn-{{ position }}-button">
     {{ ftl('vpn-shared-subscribe-link') }}
     </a>
     <p class="guarantee-copy">
       <a href="#faq-refunds">{{ ftl('vpn-shared-money-back-guarantee') }}</a>
     </p>
   {% else %}
-    <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="{{ position }}">
+    <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="{{ position }}" data-testid="join-waitlist-{{ position }}-button">
       {{ ftl('vpn-shared-waitlist-link') }}
     </a>
 
@@ -136,11 +136,11 @@ <h2 class="vpn-hero-sub-heading">{{ subheading }}</h2>
 {% macro vpn_nav_cta(link_text, alt_link_text, download_link_text, utm_source, utm_campaign) -%}
   <div class="vpn-nav-cta">
     {% if vpn_available %}
-      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="#pricing" data-cta-type="button" data-cta-text="Get Mozilla VPN" data-cta-position="navigation">
+      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="#pricing" data-cta-type="button" data-cta-text="Get Mozilla VPN" data-cta-position="navigation" data-testid="get-mozilla-vpn-nav-button">
         {{ ftl('vpn-shared-subscribe-link') }}
       </a>
     {% else %}
-      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="navigation">
+      <a class="mzp-c-button mzp-t-secondary mzp-t-md" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="navigation" data-testid="join-waitlist-nav-button">
         {{ ftl('vpn-shared-waitlist-link') }}
       </a>
     {% endif %}

diff --git a/bedrock/products/templates/products/vpn/includes/pricing-basic.html b/bedrock/products/templates/products/vpn/includes/pricing-basic.html
@@ -52,7 +52,8 @@ <h3 class="vpn-content-block-sub-heading">
                 'data-cta-position': 'pricing',
                 'data-glean-id': 'subscribe_intent',
                 'data-glean-type': 'annual',
-                'data-glean-label': 'vpn'
+                'data-glean-label': 'vpn',
+                'data-testid': 'get-mozilla-vpn-12-month-button'
               })
             }}
           </div>
@@ -100,7 +101,8 @@ <h3 class="vpn-content-block-sub-heading">
               'data-cta-position': 'pricing',
               'data-glean-id': 'subscribe_intent',
               'data-glean-type': 'monthly',
-              'data-glean-label': 'vpn'
+              'data-glean-label': 'vpn',
+              'data-testid': 'get-mozilla-vpn-monthly-button'
             })
           }}
         </div>

diff --git a/bedrock/products/templates/products/vpn/includes/pricing-plus-relay.html b/bedrock/products/templates/products/vpn/includes/pricing-plus-relay.html
@@ -65,7 +65,8 @@ <h3 class="vpn-content-block-sub-heading">
                 'data-cta-position': 'pricing',
                 'data-glean-id': 'subscribe_intent',
                 'data-glean-type': 'annual',
-                'data-glean-label': 'vpn'
+                'data-glean-label': 'vpn',
+                'data-testid': 'get-mozilla-vpn-12-month-button'
               })
             }}
           </div>
@@ -121,7 +122,8 @@ <h3 class="vpn-content-block-sub-heading">
                   'data-cta-position': 'pricing',
                   'data-glean-id': 'subscribe_intent',
                   'data-glean-type': 'annual',
-                  'data-glean-label': 'vpn_plus_relay'
+                  'data-glean-label': 'vpn_plus_relay',
+                  'data-testid': 'get-mozilla-vpn-12-month-plus-relay-button'
                 })
               }}
             </div>
@@ -164,7 +166,8 @@ <h3 class="vpn-content-block-sub-heading">
               'data-cta-position': 'pricing',
               'data-glean-id': 'subscribe_intent',
               'data-glean-type': 'monthly',
-              'data-glean-label': 'vpn'
+              'data-glean-label': 'vpn',
+              'data-testid': 'get-mozilla-vpn-monthly-button'
             })
           }}
         </div>

diff --git a/bedrock/products/templates/products/vpn/landing.html b/bedrock/products/templates/products/vpn/landing.html
@@ -93,7 +93,7 @@
           ) %}
           <div class="l-columns-two">
             <div class="l-column-first">
-              <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="secondary">
+              <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="secondary" data-testid="join-waitlist-pricing-button">
                 {{ ftl('vpn-shared-waitlist-link') }}
               </a>
 
@@ -173,7 +173,7 @@
       ) %}
         <p>{{ ftl('vpn-shared-features-full-list-servers', url='https://mullvad.net/servers/', attrs='target="_blank" rel="external noopener noreferrer"') }}</p>
 
-        <a class="mzp-c-button mzp-t-xl" href="#pricing" data-cta-type="button" data-cta-text="Scroll to pricing" data-cta-position="secondary">
+        <a class="mzp-c-button mzp-t-xl" href="#pricing" data-cta-type="button" data-cta-text="Scroll to pricing" data-cta-position="secondary" data-testid="get-mozilla-vpn-secondary-button">
           {{ ftl('vpn-shared-subscribe-link') }}
         </a>
 
@@ -198,7 +198,7 @@
         class_name='vpn-content-media-left-half vpn-more-countries-coming-soon'
       ) %}
 
-        <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="secondary">
+        <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-cta-position="secondary" data-testid="join-waitlist-secondary-button">
           {{ ftl('vpn-shared-waitlist-link') }}
         </a>
 

diff --git a/bedrock/products/templates/products/vpn/pricing-refresh.html b/bedrock/products/templates/products/vpn/pricing-refresh.html
@@ -52,7 +52,7 @@ <h2 class="c-section-title">{{ ftl('vpn-pricing-one-subscription') }}</h2>
       <header class="c-pricing-main-header">
         <h1 class="c-section-title">{{ ftl('vpn-pricing-vpn-not-available') }}</h1>
 
-        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist">
+        <a class="mzp-c-button mzp-t-product mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-testid="join-waitlist-button">
           {{ ftl('vpn-shared-waitlist-link') }}
         </a>
       </header>

diff --git a/bedrock/products/templates/products/vpn/pricing.html b/bedrock/products/templates/products/vpn/pricing.html
@@ -60,7 +60,7 @@ <h1 class="mzp-c-wordmark mzp-t-wordmark-lg mzp-t-product-vpn">{{ ftl('vpn-share
         class_name='vpn-content-media-left-half vpn-more-countries-coming-soon'
       ) %}
 
-        <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist">
+        <a class="mzp-c-button mzp-t-xl" href="{{ url('products.vpn.invite') }}" data-cta-type="button" data-cta-text="Join the VPN Waitlist" data-testid="join-waitlist-button">
           {{ ftl('vpn-shared-waitlist-link') }}
         </a>
 

diff --git a/tests/functional/products/vpn/__init__.py b/tests/functional/products/vpn/__init__.py
diff --git a/tests/functional/products/vpn/test_features.py b/tests/functional/products/vpn/test_features.py
diff --git a/tests/functional/products/vpn/test_landing.py b/tests/functional/products/vpn/test_landing.py
diff --git a/tests/functional/products/vpn/test_pricing.py b/tests/functional/products/vpn/test_pricing.py
diff --git a/tests/functional/products/vpn/test_resource_center.py b/tests/functional/products/vpn/test_resource_center.py
diff --git a/tests/pages/products/vpn/__init__.py b/tests/pages/products/vpn/__init__.py
diff --git a/tests/pages/products/vpn/features.py b/tests/pages/products/vpn/features.py