Email Template Dark Mode QA Test Plan Builder
Build a QA test plan for HTML email templates across dark mode clients, accessibility states, tracking links, fallbacks, and rendering quirks.
Prompt Template
You are a frontend QA engineer specializing in HTML email rendering. Create a dark mode QA test plan for the email program below. Email type: [transactional, lifecycle, newsletter, ecommerce, SaaS onboarding, nonprofit appeal] Audience and devices: [desktop-heavy, mobile-heavy, enterprise Outlook, iOS Mail, Gmail, mixed] ESP or sending platform: [Klaviyo, Braze, Customer.io, Salesforce Marketing Cloud, Mailchimp, SendGrid, other] Template system: [MJML, custom HTML, React email, drag-and-drop builder, legacy templates] Brand requirements: [colors, logo variants, typography, button styles, accessibility contrast rules] Core modules: [hero, product card, receipt table, CTA button, footer, legal copy, personalization blocks] Dark mode risks: [logo disappears, inverted backgrounds, low contrast, border loss, image halos, button colors, table striping] Clients to test: [Apple Mail, iOS Mail, Gmail iOS, Gmail Android, Outlook Windows, Outlook Mac, Outlook web, Yahoo] Testing tools available: [Litmus, Email on Acid, real devices, screenshots, manual inboxes, none] Personalization variables: [first name, product name, account link, date, price, coupon, empty states] Compliance constraints: [unsubscribe, privacy notice, legal footer, accessibility, regulated copy] Release deadline: [date or cadence] Produce: 1. Test matrix by client, device, light mode, dark mode, and high-contrast mode where relevant. 2. Module-level checklist for backgrounds, text, links, buttons, images, tables, dividers, and legal footer. 3. Accessibility checks for contrast, alt text, semantic order, link purpose, text scaling, and tap target size. 4. Personalization and fallback test cases, including missing or long variable values. 5. Tracking, unsubscribe, preference center, and deep-link validation steps. 6. Known rendering quirks to watch for in Outlook, Gmail, and Apple Mail. 7. Screenshot naming convention and defect severity rubric. 8. Pre-send approval workflow with owner, evidence, and rollback trigger. 9. Regression checklist for future template changes. 10. Short summary for non-technical stakeholders. Use practical QA language and separate must-fix rendering defects from acceptable client-specific differences.
Example Output
Dark Mode QA Matrix
| Client | Mode | Priority | Checks |
|---|---|---:|---|
| iOS Mail | Dark | P0 | Logo variant, hero contrast, CTA color, footer links |
| Gmail Android | Dark | P1 | Background inversion, product card border, price table readability |
| Outlook Windows | Dark/high contrast | P0 | VML button fallback, table spacing, link visibility |
Must-Fix Defect
CTA text drops below 4.5:1 contrast in Outlook dark mode. Replace brand orange text on dark gray with the approved light text token and retest the button in all Outlook variants.
Release Evidence
Store screenshots by campaign, template version, client, mode, and date so future regressions can be compared quickly.
Tips for Best Results
- 💡Include the actual client mix because email dark mode behavior differs sharply between Gmail, Apple Mail, and Outlook.
- 💡List personalization variables so the QA plan covers empty, long, and malformed values before launch.
- 💡Ask for a severity rubric to keep cosmetic client quirks from blocking urgent transactional sends.
Related Prompts
Code Review Assistant
Get a thorough, senior-level code review with actionable feedback on quality, security, performance, and best practices.
Debugging Detective
Systematically debug errors and unexpected behavior with root cause analysis and fix suggestions.
Code Refactoring Advisor
Transform messy, complex code into clean, maintainable, well-structured code with clear explanations.