Credits page automated tests [WV-2638]

tests/browserstack_automation/page_objects/credits.browser.js

@@ -0,0 +1,104 @@
+import { $, $$ } from '@wdio/globals';
+import PageBrowser from './page.browser';
+
+// Page object for the WeVote Credits & Thanks page.
+// URL: https://quality.wevote.us/more/credits
+
+class CreditsBrowser extends PageBrowser {
+  constructor () {
+    super();
+    this.title = 'Credits & Thanks - WeVote';
+  }
+
+  // ─── Page heading ────────────────────────────────────────────────────────────
+
+  get pageHeading () {
+    return $("//h1[normalize-space()='Credits & Thanks']");
+  }
+
+  // ─── Intro section ───────────────────────────────────────────────────────────
+
+  get openSourceInlineLink () {
+    // WDIO partial link text selector: first <a> whose visible text contains this phrase
+    return $('*=open source software');
+  }
+
+  // ─── Organization logos ──────────────────────────────────────────────────────
+
+  get allImages () {
+    return $$('img');
+  }
+
+  get orgLogoLinks () {
+    // <a> tags that wrap an image and point to an external (non-WeVote) site.
+    // Note: the previous selector ('a img') returned the <img> elements themselves,
+    // which have no href or target, so TC-010 and TC-011 could never pass.
+    return $$("//a[.//img][starts-with(@href, 'http')][not(contains(@href, 'wevote'))]");
+  }
+
+  // ─── Volunteers section ──────────────────────────────────────────────────────
+
+  get volunteersHeading () {
+    return $("//*[contains(text(), 'Volunteers') and contains(text(), 'Donors')]");
+  }
+
+  get volunteerRoleLink () {
+    return $('a[href*="apply"]');
+  }
+
+  get donateLink () {
+    return $('a[href*="donate"]');
+  }
+
+  // ─── Footer elements ─────────────────────────────────────────────────────────
+
+  get footerGetStarted () {
+    return $('#footerLinkGetStarted');
+  }
+
+  get footerFacebook () {
+    return $('#footerLinkFacebook');
+  }
+
+  get footerTwitter () {
+    return $('#footerLinkTwitter');
+  }
+
+  get footerInstagram () {
+    return $('#footerLinkInstagram');
+  }
+
+  get footerOpenSource () {
+    return $('#footerLinkOpenSource');
+  }
+
+  get footerPrivacy () {
+    return $('#footerLinkPrivacy');
+  }
+
+  get footerTerms () {
+    return $('#footerLinkTermsOfUse');
+  }
+
+  get googleBadge () {
+    return $('#googleBadge');
+  }
+
+  get appleBadge () {
+    return $('#appleBadge');
+  }
+
+  // ─── Page load & helpers ─────────────────────────────────────────────────────
+
+  async load () {
+    await super.open('/more/credits');
+  }
+
+  async scrollToFooter () {
+    // Wait for the footer to exist, then scroll it into view (no fixed pause needed)
+    await this.footerGetStarted.waitForExist({ timeout: 10000 });
+    await this.footerGetStarted.scrollIntoView();
+  }
+}
+
+export default new CreditsBrowser();

tests/browserstack_automation/specs/CreditsPage.browser.js

@@ -0,0 +1,182 @@
+import { $, browser, driver, expect } from '@wdio/globals';
+import CreditsPage from '../page_objects/credits.browser';
+
+const waitTime = 10000;
+
+/* eslint-disable no-undef */
+describe('Credits & Thanks Page', () => {
+  beforeEach(async () => {
+    await CreditsPage.load();
+    await CreditsPage.pageHeading.waitForDisplayed({ timeout: waitTime });
+  });
+
+  // TC-001: Credits page loads successfully
+  it('verify Credits page loads and heading is visible', async () => {
+    console.log('TC: Credits_001 — page loads successfully');
+    await expect(driver).toHaveUrl(expect.stringContaining('/more/credits'));
+    await expect(CreditsPage.pageHeading).toBeDisplayed();
+    await expect(CreditsPage.pageHeading).toHaveText('Credits & Thanks');
+  });
+
+  // TC-002: Browser tab title is correct
+  it('verify browser tab title contains Credits or WeVote', async () => {
+    console.log('TC: Credits_002 — page title is correct');
+    const title = (await browser.getTitle()).toLowerCase();
+    expect(title).toMatch(/credits|wevote/);
+  });
+
+  // TC-005: 'Open source software' inline link is clickable
+  it('verify open source software inline link is clickable and has valid href', async () => {
+    console.log('TC: Credits_005 — open source inline link');
+    await CreditsPage.openSourceInlineLink.waitForClickable({ timeout: waitTime });
+    // getProperty returns the resolved absolute URL, even if the raw href is relative
+    const href = await CreditsPage.openSourceInlineLink.getProperty('href');
+    expect(href).toBeTruthy();
+  });
+
+  // TC-006: All organization logos render without broken images
+  it('verify all organization logos render without broken images', async () => {
+    console.log('TC: Credits_006 — no broken org logo images');
+    const images = await CreditsPage.allImages;
+    const broken = [];
+    for (const img of images) {
+      const naturalWidth = await browser.execute((el) => el.naturalWidth, img);
+      const src = (await img.getAttribute('src')) || '';
+      if (naturalWidth === 0 && src) {
+        broken.push(src);
+      }
+    }
+    // Comparing to [] prints the list of broken image srcs if this fails
+    expect(broken).toEqual([]);
+  });
+
+
+
+  // TC-007: All credited organizations are present on the page
+  it('verify all credited organizations are present on the Credits page', async () => {
+    console.log('TC: Credits_007 — all org names present');
+    const bodyText = await $('body').getText();
+    const altTexts = [];
+    for (const img of await CreditsPage.allImages) {
+      altTexts.push((await img.getAttribute('alt')) || '');
+    }
+    const pageText = `${bodyText} ${altTexts.join(' ')}`.toLowerCase();
+
+    // Distinctive fragment of each org name, so minor wording changes
+    // (e.g. "Amazon Web Services" vs "AWS") don't break the test
+    const expectedOrgs = [
+      'amazon', 'atlassian', 'ballotpedia', 'browserstack', 'civic life',
+      'civicmakers', 'code for america', 'dla piper', 'eleven labs', 'facebook',
+      'fast forward', 'fastly', 'google', 'greenberg', 'league of women voters',
+      'maplight', 'microsoft', 'turbovote', 'twilio', 'twitter',
+      'vote smart', 'vote usa', 'pew', 'we vote education', 'wikipedia',
+    ];
+    const missing = expectedOrgs.filter((org) => !pageText.includes(org));
+    expect(missing).toEqual([]);
+  });
+
+  // TC-007b: The organization logo section renders in full
+  it('verify the organization logo section renders in full', async () => {
+    console.log('TC: Credits_007b — org logo count');
+    const logoLinks = await CreditsPage.orgLogoLinks;
+    console.log(`Found ${logoLinks.length} organization logo links`);
+    expect(logoLinks.length).toBeGreaterThanOrEqual(20);
+  });
+
+  // TC-010: Org logo links point to external sites
+  it('verify organization logo links have valid external hrefs', async () => {
+    console.log('TC: Credits_010 — org logo links have valid hrefs');
+    const logoLinks = await CreditsPage.orgLogoLinks;
+    expect(logoLinks.length).toBeGreaterThanOrEqual(5);
+
+    const invalid = [];
+    for (const link of logoLinks) {
+      const href = (await link.getAttribute('href')) || '';
+      if (!/^https?:\/\/[^/\s]+\.[a-z]{2,}/i.test(href)) {
+        invalid.push(href);
+      }
+    }
+    expect(invalid).toEqual([]);
+  });
+
+  // TC-011: Org logo links open in a new tab
+  it('verify organization logo links open in a new tab', async () => {
+    console.log('TC: Credits_011 — org logo links open in new tab');
+    const logoLinks = await CreditsPage.orgLogoLinks;
+    expect(logoLinks.length).toBeGreaterThan(0);
+
+    // Collect the hrefs of any logo links that do NOT open in a new tab
+    const notNewTab = [];
+    for (const link of logoLinks) {
+      const target = await link.getAttribute('target');
+      if (target !== '_blank') {
+        notNewTab.push(await link.getAttribute('href'));
+      }
+    }
+    expect(notNewTab).toEqual([]);
+  });
+
+  // TC-013: Volunteers, Interns & Donors section heading is present
+  it('verify Volunteers Interns and Donors section heading is visible', async () => {
+    console.log('TC: Credits_013 — volunteers section heading present');
+    await CreditsPage.volunteersHeading.waitForDisplayed({ timeout: waitTime });
+    await expect(CreditsPage.volunteersHeading).toBeDisplayed();
+  });
+
+  // TC-014a: Volunteer role link is functional
+  it('verify finding a volunteer role link has valid href', async () => {
+    console.log('TC: Credits_014a — volunteer role link functional');
+    await CreditsPage.volunteerRoleLink.waitForClickable({ timeout: waitTime });
+    const href = await CreditsPage.volunteerRoleLink.getAttribute('href');
+    expect(href).toMatch(/^https?:\/\//);
+  });
+
+  describe('Footer', () => {
+    beforeEach(async () => {
+      await CreditsPage.scrollToFooter();
+    });
+
+    // TC-016: Footer is visible and fully rendered
+    it('verify footer is visible and key elements are rendered', async () => {
+      console.log('TC: Credits_016 — footer visible');
+      await CreditsPage.footerGetStarted.waitForDisplayed({ timeout: waitTime });
+      await expect(CreditsPage.footerGetStarted).toBeDisplayed();
+      await expect(CreditsPage.footerPrivacy).toBeDisplayed();
+      await expect(CreditsPage.footerOpenSource).toBeDisplayed();
+    });
+
+    // TC-019: Footer social media links open in a new tab
+    it('verify footer social media links open in a new tab', async () => {
+      console.log('TC: Credits_019 — footer social links open in new tab');
+      await expect(CreditsPage.footerFacebook).toHaveAttribute('target', '_blank');
+      await expect(CreditsPage.footerTwitter).toHaveAttribute('target', '_blank');
+      await expect(CreditsPage.footerInstagram).toHaveAttribute('target', '_blank');
+    });
+
+    // TC-020: Footer nonprofit disclaimer text is present
+    it('verify footer nonprofit disclaimer text is present', async () => {
+      console.log('TC: Credits_020 — nonprofit disclaimer present');
+      const bodyText = (await $('body').getText()).toLowerCase();
+      expect(bodyText).toMatch(/nonprofit|501/);
+      expect(bodyText).toMatch(/political|candidate/);
+    });
+
+    // TC-021: Footer open source link points to GitHub
+    it('verify footer open source link points to GitHub', async () => {
+      console.log('TC: Credits_021 — open source link points to GitHub');
+      await CreditsPage.footerOpenSource.waitForDisplayed({ timeout: waitTime });
+      const href = await CreditsPage.footerOpenSource.getAttribute('href');
+      expect(href).toContain('github');
+    });
+
+    // TC-022: App store badges are visible and functional
+    it('verify App Store badges have links and open in new tab', async () => {
+      console.log('TC: Credits_022 — app store badges functional');
+      for (const badge of [CreditsPage.googleBadge, CreditsPage.appleBadge]) {
+        const href = await badge.getAttribute('href');
+        expect(href).toBeTruthy();
+        await expect(badge).toHaveAttribute('target', '_blank');
+      }
+    });
+  });
+});