Fix vpn id issues (#17239)

* Add missing html properties

* Separate arm and 64 bit tests

Author: bluewave41

bedrock/products/templates/products/vpn/download.html

@@ -82,14 +82,13 @@ <h2>{{ ftl('vpn-download-for-windows-long') }}</h2>
               <p class="current-platform-lede">{{ ftl('vpn-download-based-on-your') }}</p>
               <p>{{ ftl('vpn-download-for-windows-requirements-v2') }}</p>
               <div class="platform-link-container">
-                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-download') }}"  data-cta-text="Install via Flathub" class="platform-download-link">
+                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows x64)" class="platform-download-link" data-testid="vpn-download-link-primary-64-windows">
                 {{ ftl('vpn-download-windows') }}
                 </a>
-                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}"  data-cta-text="Install via APT" class="platform-download-link">
+                <a class="mzp-c-button ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}" data-cta-text="VPN Download (Windows ARM)" class="platform-download-link" data-testid="vpn-download-link-primary-arm-windows">
                 {{ ftl('vpn-download-windows-arm') }}
                 </a>
               </div>
-              </a>
             </div>
           </div>
           <!-- Mac OS -->
@@ -181,11 +180,11 @@ <h2>{{ ftl('vpn-download-for-windows-v2') }}</h2>
               <p>{{ ftl('vpn-download-for-windows-requirements-v2') }}</p>
             </div>
             <div class="platform-link-container">
-              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="Install via Flathub" class="platform-download-link">
+              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-download') }}" data-cta-text="VPN Download (Windows x64)"class="platform-download-link" data-testid="vpn-download-link-secondary-64-windows">
                 <span class="platform-download-arrow"></span>
                 {{ ftl('vpn-download-windows') }}
               </a>
-              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}" data-cta-text="Install via APT" class="platform-download-link">
+              <a class="mzp-c-button mzp-t-secondary ga-product-download" href="{{ url('products.vpn.windows-arm-download') }}" data-cta-text="VPN Download (Windows ARM)" class="platform-download-link" data-testid="vpn-download-link-secondary-arm-windows">
                 <span class="platform-download-arrow" aria-hidden="true"></span>
                 {{ ftl('vpn-download-windows-arm') }}
               </a>

tests/playwright/specs/products/vpn/vpn-download.spec.js

@@ -22,17 +22,17 @@ test.describe(
                 await openPage(url + '?geo=us', page, browserName);
             });
 
-            test('Windows download click', async ({ page, browserName }) => {
+            test('Windows download 64 click', async ({ page, browserName }) => {
                 // Click Windows download link
                 let downloadLink;
 
                 if (browserName === 'webkit') {
                     downloadLink = page.getByTestId(
-                        'vpn-download-link-secondary-windows'
+                        'vpn-download-link-secondary-64-windows'
                     );
                 } else {
                     downloadLink = page.getByTestId(
-                        'vpn-download-link-primary-windows'
+                        'vpn-download-link-primary-64-windows'
                     );
                 }
 
@@ -59,6 +59,46 @@ test.describe(
                 await download.cancel();
             });
 
+            test('Windows download arm click', async ({
+                page,
+                browserName
+            }) => {
+                // Click Windows download link
+                let downloadLink;
+
+                if (browserName === 'webkit') {
+                    downloadLink = page.getByTestId(
+                        'vpn-download-link-secondary-arm-windows'
+                    );
+                } else {
+                    downloadLink = page.getByTestId(
+                        'vpn-download-link-primary-arm-windows'
+                    );
+                }
+
+                await expect(downloadLink).toBeVisible();
+                await downloadLink.click();
+                await page.waitForURL(
+                    '**/products/vpn/download/windows-arm/thanks/',
+                    {
+                        waitUntil: 'commit'
+                    }
+                );
+
+                // Assert /thanks/ page triggers file download.
+                const download = await page.waitForEvent('download');
+                const downloadURL = download.url();
+
+                expect(downloadURL).toEqual(
+                    expect.stringContaining(
+                        'https://archive.mozilla.org/pub/vpn/releases/'
+                    )
+                );
+
+                // Cancel download if not finished.
+                await download.cancel();
+            });
+
             test('Mac download click', async ({ page, browserName }) => {
                 // Click Windows download link
                 let downloadLink;