How to Use the QA Tool

Everything you need to know about running automated checks on your email HTML — from uploading files to reading results and exporting reports.

⚡ No installation needed 🔒 All data stays in your browser ✅ 39 automated checks 📤 Exportable report

Getting Started

What this tool does and what you need before you begin

The Email QA Tool is a standalone browser-based tool that lets QA testers, producers and developers run automated checks on an American Express email HTML file — without installing Cypress, Node.js or any other software.

No data leaves your browser. Your HTML and image files are read locally using the File API — nothing is uploaded to any server.

What you need

A modern browser

Chrome, Edge, Firefox or Safari — any current version works. Internet Explorer is not supported.

Required

The email HTML file

Your .html or .htm email file, saved locally.

Required

Image folder (optional)

The folder that contains all images referenced by the email. Only needed if the email uses relative local image paths and you want to see them rendered correctly in the preview.

Optional

Step-by-Step Guide

Follow these four steps to run a complete QA check

Upload your Email HTML file

In the left sidebar, click the "Email HTML File" upload zone (or drag your .html file onto it). Once loaded, a green confirmation badge will appear showing the file name, and the Run QA Checks button will become active.

💡 Only .html or .htm files are accepted

Upload your Image Folder (optional)

If your email uses relative image paths (e.g. images/hero.jpg instead of a full URL), click the "Email Image Folder" zone and select the folder that contains all the email's images. The tool will rewrite those paths as blob URLs so images appear correctly in the preview panel.

💡 Skip this step if all your images are hosted URLs (http/https)

Click "Run QA Checks"

Press the blue Run QA Checks button. The tool will parse your HTML, run all 39 automated checks across four categories, and display the results in the right panel within seconds. A spinning indicator will show while checks are running.

💡 You can re-run checks at any time after uploading a new file

Review results and export

Use the filter tabs (All / Fail / Warn) to focus on issues. Each result shows the check name, a status badge, and a detail message explaining what was found. Scroll down to see the Email Preview panel. When finished, click Export Report to download a .txt summary file.

💡 Switch the preview between Desktop and Mobile (390px) widths
Important: This tool covers automated checks only. Checks marked WARN may still require manual verification — for example, visual layout, GIF frames, PDF comparison, and link destination accuracy.

What Is Checked

All 39 automated checks across 4 categories — with automation level noted

AUTO = fully automated, result is definitive. SIGNAL = automated detection, but a human should confirm the result in context.
Visuals / UI

Email is 620px wide (1240px for Retina)

Scans all <table> elements for a width attribute of 620 or 1240.

AUTO

All images have a valid src attribute

Checks every <img> tag for a non-empty, non-placeholder src value.

AUTO

All local images found in uploaded folder

When a folder is uploaded, resolves each relative image path against the folder. Reports any images not found. (Skipped if no folder is uploaded.)

AUTO

No stacked line breaks (3+ consecutive <br>)

Flags any run of 3 or more consecutive <br> tags which can cause unwanted spacing on some clients.

AUTO

Footnote markers detected in email body

Looks for numeric markers (1.–20.) in the visible text. A WARN means none were found — not necessarily a failure.

SIGNAL

Horizontal divider elements present

Counts <hr> tags and elements with inline border styles. A WARN means none were found — verify visually in the preview.

SIGNAL
Copy

Common misspellings check

Scans visible text against a 40-word list of frequently misspelled words.

AUTO

Special characters encoded

Compares raw apostrophe and em dash counts against encoded equivalents (&rsquo; &mdash; etc.).

SIGNAL

No AMPscript variable leaks

Detects unresolved %%VARIABLE%% tokens that would appear as raw code in the live email.

AUTO

Preview / preheader text markup present

Looks for class names or IDs containing "preview" or "preheader" in the HTML.

SIGNAL

Preview spacer / white-space code after preheader

Checks for ͏, &zwnj;, ​, or white-space CSS used to push preheader text out of the preview snippet.

SIGNAL
Code Best Practices

Title tag is not empty

Checks the <title> tag exists and contains text.

AUTO

All alt tags in place (non-empty)

Every <img> must have a non-empty alt attribute.

AUTO

Footnotes use sup / span / entity tags

Detects <sup>, vertical-align spans, or &sup1; / &sup2; / &sup3; entities.

SIGNAL

No href="#" placeholder links

Flags every <a href="#"> that hasn't been replaced with a real URL.

AUTO

No extra spaces in src or href attributes

Checks for leading or trailing whitespace inside src="" and href="" values.

AUTO

No <script> tags in email HTML

Script tags will be stripped by most email clients and can trigger spam filters.

AUTO

All external links open in a new tab

Checks every http/https link for target="_blank".

AUTO

Every external link has aria-label "opens a new tab"

Accessibility requirement for screen reader users opening links.

AUTO

‑ non-breaking hyphen not present

‑ causes rendering issues in most email clients — use CSS nowrap instead.

AUTO

role="main" aria-roledescription="email" aria-label present

Required ARIA landmark for screen reader compatibility per accessibility standards.

AUTO

Heroes wrapped in <H1> or aria-level="1"

Desktop and mobile hero images/copy should be wrapped in <h1> or role="heading" aria-level="1".

SIGNAL

Body headlines use <H2>/<H3> or aria-level="2/3"

Headline-like images below the hero should be marked up with appropriate heading hierarchy.

SIGNAL

T&C heading aria-level="2"

The Terms and Conditions heading must use role="heading" aria-level="2".

SIGNAL

Numbered T&C headings aria-level="3"

Numbered sub-sections inside T&C should use role="heading" aria-level="3".

SIGNAL

T&C URLs blue and underlined (class="a5u")

All links inside Terms sections must carry the class="a5u" styling.

AUTO

List items use role="list" / role="listitem"

Any list-like layout must use ARIA list roles for screen reader compatibility.

SIGNAL

lang="en" and dir="ltr" present

Required on the main container for internationalization and RTL safety.

AUTO
Misc / SFMC / Colors

Subject Line and Preview in the script

Checks for SubjectLine and preview/preheader references in the AMPscript block.

SIGNAL

SFMC Business header/footer ContentBlockByName

Verifies bus_header and bus_footer embed strings are present for SFMC emails.

SIGNAL

Blue links on grey backgrounds use #005dae

Scans for the correct hex value for links placed on grey backgrounds.

AUTO

Blue links on white backgrounds use #006fcf

Scans for the correct hex value for links on white/light backgrounds.

AUTO

Body text color is #3D3D3D, not #333333

Flags any use of the incorrect dark grey hex value for body copy.

AUTO

Background/divider is #E0E0E0, not #D9D9D6

Flags the incorrect background grey that was used in older templates.

AUTO

Dividers use #595959, not #CCCCCC

Checks that horizontal divider lines use the correct divider color.

AUTO

CMPGN_VER_CELL_ID conditional logic present

Checks for the campaign version cell ID variable used for multi-version sends.

SIGNAL

RaiseError present for invalid cell IDs

Ensures error handling logic exists for unrecognized cell IDs in AMPscript.

SIGNAL

HTML_disclosure ContentBlockByName present

Verifies the footer disclosure embed code is included.

SIGNAL

Physical address / copyright ContentBlockByName present

Checks footer contains either a physical_address or copyright content block.

SIGNAL

CTA URL variable(s) set in AMPscript

Looks for CTA_URL references to confirm call-to-action links are wired up.

SIGNAL

PERSONALIZATION variable(s) present

Checks whether personalization tokens appear in the email (required for personalised emails).

SIGNAL

Reading Results

Understanding status indicators, the summary bar and filter tabs

Status meanings

PASS

The check ran successfully and the condition was met. No action required for this item.

FAIL

The check detected a definite issue that needs to be fixed before the email is deployed. Address all FAIL items.

WARN

The check found a potential issue or could not fully verify the condition automatically. A human should review the detail message and confirm.

Using the filter tabs

Above the results list, three filter tabs let you quickly isolate specific result types:

All

Shows every check result across all four categories. Default view.

Fail

Shows only failed checks — the critical issues that must be resolved before deployment.

Warn

Shows only warning checks — items that need a human to confirm or investigate.

Summary bar

At the top of the results area, a summary bar shows totals at a glance:

✓ 28 Pass ✗ 3 Fail ⚠ 8 Warn ● 39 Total

Aim for zero FAIL results before handing off. WARN results should each be reviewed manually.

Exporting Reports

How to download and share your QA results

After running checks, click the ⬇ Export Report button in the summary bar. A plain-text file called amex-qa-report.txt will be downloaded to your default downloads folder.

AMEX EMAIL QA REPORT
Generated: 4/23/2026, 10:15:00 AM
════════════════════════════════════════════════════════════

[ VISUALS / UI ]
  [PASS]  Email is 620px wide (1240px for Retina)
          620px or 1240px outer table detected.
  [FAIL]  All images have a valid src attribute
          Missing/empty src: images/hero.jpg, images/cta.png
  [PASS]  No stacked line breaks
          No stacked <br> tags found.

[ COPY ]
  [PASS]  Common misspellings check
          No common misspellings detected.
  [WARN]  Preview/preheader text markup present
          No preheader markup detected — verify manually.

════════════════════════════════════════════════════════════
SUMMARY:  28 pass  |  3 fail  |  8 warn  |  39 total
Tip: Attach the exported .txt file to your project ticket or paste it into the Account Notes section of your QA sheet for a permanent record.

Tips & Best Practices

Get the most out of the QA tool

Always upload your image folder
Even if images are hosted URLs in production, uploading the folder lets you catch missing local files early and renders the preview correctly.
Fix FAILs before WARNs
FAIL results are definitive errors. Clear all FAILs first, then review each WARN item manually before sign-off.
Use the preview for visual checks
The built-in preview panel renders the actual HTML. Toggle between Desktop and Mobile (390px) to check responsive layout visually.
Re-run after dev fixes
Upload the updated HTML file and click Run QA Checks again. The tool always checks the most recently uploaded file.
Use Fail filter during review
Click the "Fail" filter tab to instantly hide passing checks and focus only on items that need attention.
This tool complements — not replaces — Litmus
Run this tool first to catch code and copy issues, then use Litmus for rendering across email clients and devices.
Test with the final HTML
Always QA the file that will be uploaded to SFMC — not a draft or a partial build. AMPscript checks depend on the full script block being present.
Pay special attention to ARIA checks
The role="main", heading levels, aria-label, and list role checks ensure your email is accessible to screen reader users as per standards.

Frequently Asked Questions

Common questions from the QA team

The button is disabled until an HTML file has been successfully uploaded. Make sure you are selecting a file with a .html or .htm extension. Once the file loads, a green badge will appear and the button will become active.
Upload the email's image folder using the Email Image Folder upload zone (Step 2). The tool will remap all relative image paths to local blob URLs. Make sure the image filenames in the folder exactly match those referenced in the HTML (including case on Mac/Linux).
Some checks (marked SIGNAL) can only detect the presence or absence of certain patterns — they cannot always tell whether the result is intentional. A WARN means "the tool could not fully verify this — a human should look." Read the detail text under the check name for guidance on what to confirm manually.
No. The tool checks that links have valid href attributes (not empty, not #, no extra spaces) and that they open in new tabs. Verifying that each URL leads to the correct page must be done manually by clicking each link — this cannot be automated safely in a browser-based tool.
The following must still be done manually or via other tools:
  • PDF vs. HTML visual comparison
  • GIF frame-by-frame review and watermark check
  • Font size, weight, orientation and spacing visual check
  • Grammar and punctuation review
  • TM / brand name consistency with PDF
  • Clicking each link to confirm it goes to the right page
  • Confirming Hero/GIF/CTA URLs match the HTML form
  • Litmus cross-client rendering tests
  • Image file size check (<500KB non-animated, <2MB animated)
  • PZN / MI code matching against documentation
No. The tool runs entirely in your browser using the browser's built-in File API and DOMParser. Your HTML content and images are never uploaded to any server. Closing the browser tab clears everything.
The tool is designed primarily for desktop use where you can easily access your project folder. It is responsive and will work on tablets in landscape mode, but folder uploads (webkitdirectory) may not be supported on all mobile browsers.
Color checks scan the raw HTML source. If a color is defined in an external stylesheet or injected by JavaScript at runtime, the tool will not detect it. Also check that you are using the exact hex values — for example #006fcf (all lowercase) or #006FCF (uppercase) — both should match, but mixed case may occasionally cause issues depending on how the value is written.