Webflow site testing: breakpoints, interactions and CMS

Webflow makes it easy to design visually and easy to miss what happens at a breakpoint you did not check or on a CMS item with long content. This page lists what to test on a Webflow site before publishing and gives you a task your AI beta tester can run on the staging or live domain.

Who it’s for

  • Designers and no-code builders publishing Webflow sites
  • Agencies delivering Webflow sites to clients
  • Marketing teams updating CMS content and landing pages
  • Founders who built their own site in Webflow

Updated 2026-10-19.

Why Webflow sites need their own checks

In Webflow you style each breakpoint separately, add interactions on scroll and load, and fill templates with CMS content written later by someone else. The designer's preview on one screen size rarely covers everything. Testing on the published webflow.io staging domain, then the custom domain, catches what the Designer view hides.

Webflow site testing is a beta test of the published site, not the Designer canvas. A beta tester opens real URLs in a real browser at real widths, the way visitors will, and reports what breaks with the page, the breakpoint and a screenshot.

What to test on a Webflow site

  • Breakpoints: desktop, tablet, mobile landscape and mobile portrait, plus widths between them. Look for overflow, text that wraps badly, fixed heights cutting off content and hidden elements that should be visible.
  • Navigation: the navbar menu opens and closes on mobile, dropdowns work on touch, anchor links scroll to the right section and account for a sticky header.
  • Interactions and animations: elements that start hidden and only appear on scroll; if an interaction fails, content stays invisible. Check that pages are usable with reduced motion.
  • CMS collection pages: long titles, missing images, empty optional fields, rich text with headings, lists and embeds. Test the longest and the emptiest items, not only the sample one.
  • Forms: validation, success and error messages, redirects after submit, and that submissions actually arrive in the form settings or your integration.
  • SEO settings: title and meta description on static pages and CMS templates, Open Graph image, no leftover "Webflow" defaults, sitemap and canonical domain settings.
  • Links: links to the webflow.io staging domain on the live site, placeholder "#" links, buttons with no link set.
  • Assets: large images not using responsive variants, custom fonts loading, favicons and webclip icons.
  • Custom code: embeds and scripts in the head or before body that throw console errors.

How to run a Webflow site beta test

  1. Publish to the webflow.io staging domain. Testing the Designer preview is not enough; interactions, forms and custom code behave differently on a published site.
  2. List what to cover. Static pages, each CMS template with two or three real items (the longest, the emptiest, a typical one), and every form.
  3. Share access. If the staging site is password protected, give testers the password, and say whether forms may be submitted.
  4. Test every breakpoint. Go through each page at desktop, tablet and phone widths, and resize between them.
  5. Scroll each page fully so every on-scroll interaction fires, and note anything that stays invisible.
  6. Submit each form with test data and confirm the submission arrives.
  7. Fix, publish to the custom domain and re-test. Run a short pass on the live domain to catch staging links, domain settings and SEO defaults.

Webflow site testing checklist

Layout and breakpoints

  • No horizontal scrolling at any width between phone and desktop.
  • No section with a fixed height cutting off text on smaller screens.
  • Elements hidden on one breakpoint are not needed on that breakpoint.
  • Long headings and buttons wrap cleanly instead of overflowing.

Navigation and interactions

  • The mobile menu opens, closes and does not leave the page scroll-locked.
  • Dropdowns work on touch, not only on hover.
  • Every element that animates in on scroll actually appears.
  • Tabs, sliders and lightboxes work at every breakpoint.

CMS templates

  • The longest title, an item with an empty optional field and an item with no image all render cleanly.
  • Rich text styles headings, lists, quotes and embedded media correctly.
  • Collection lists, pagination and filters show the right items, and an empty list shows a friendly message.

Forms

  • Required fields are validated with a clear message.
  • The success state or redirect works, and the error state is readable.
  • Submissions arrive in Webflow form settings or your connected tool.

Publishing, SEO and code

  • No links point at the webflow.io domain on the live site, and no buttons are missing a link.
  • Every page and CMS template has its own title, description and Open Graph image.
  • No "Heading", "Button Text" or lorem ipsum defaults remain.
  • No console errors from custom code or embeds, and fonts and favicons load.

Example Webflow bug report

Title: Pricing cards stay invisible on mobile (scroll interaction never fires)
URL: https://example-site.webflow.io/pricing
Environment: Chrome, mobile portrait 375 px
Severity: High (visitors on phones can't see any plans)

Steps to reproduce:
1. Open /pricing at 375 px width
2. Scroll slowly down past the "Plans" heading
3. Wait a few seconds

Expected: The three pricing cards fade in
Actual: The cards keep opacity 0; the space is blank. Works on desktop.
The mobile breakpoint has the interaction trigger disabled.

Evidence: annotated screenshot of the empty section, screen recording

Common Webflow bugs

  1. A section with a fixed height that cuts off text on mobile.
  2. Content invisible because an on-scroll interaction never fired.
  3. CMS template breaking on an item with an unusually long title.
  4. "Button Text" or "Heading" defaults left on a page.
  5. A form success message never shown because of a redirect setting.

Common mistakes when testing a Webflow site

  • Reviewing in the Designer only. The canvas hides real browser behavior, custom code and form handling.
  • Testing just the four default breakpoints. Widths between them, like large phones and small laptops, break layouts too.
  • Checking only the sample CMS item. Real editors will add long titles, missing images and empty fields.
  • Forgetting the custom domain. Staging links, SEO settings and domain redirects only show up after publishing to it.
  • Publishing a quick fix without re-testing. A change on one breakpoint can cascade to others.

What to fix first

  1. Invisible or unreachable content: failed interactions, menus that will not open, cut-off sections.
  2. Forms that do not deliver or show no success state.
  3. Broken links, especially to the staging domain or missing button links.
  4. CMS template breaks on real content.
  5. SEO defaults and polish: titles, share images, spacing.

Manual testing vs an AI beta tester

People in your audience tell you whether the design communicates the brand and whether the site persuades them to act. An automated tester can't judge that, can't tell you whether visitors would buy, and is no substitute for a certified accessibility audit.

An AI beta tester such as betatest.ing handles the wide, repetitive coverage. It opens the published site in a real browser, goes through each page and CMS item you list at several widths, scrolls to trigger interactions, submits forms with test data if you allow it and reads the console. Each problem comes with steps, severity, annotated screenshots and a screen recording, and the run ends with a report and a quality score. Since every republish can change several breakpoints at once, running the same test after each publish, or on a schedule, is where it saves the most time.

After launch

Webflow sites change whenever someone edits a page or adds CMS items. Re-run a short pass after major publishes and schedule a regular check of the key pages and forms.

The test task

What you send your AI beta tester. It works out the steps and tests like a real user.

Beta test my Webflow site [SITE URL]. It is [WHAT THE SITE IS FOR]. Visit every static page and several items from each CMS collection, including ones with long titles or missing images. Check every link and button for "#" placeholders, staging (webflow.io) links and missing targets. Test the navbar and dropdowns, anchor links and any scroll or load interactions; flag content that stays invisible. Check each page at desktop, tablet (820px) and mobile (390px) widths for overflow, cut-off text and fixed-height sections. Test the forms with valid and invalid input and check the success and error messages. Check page titles, meta descriptions and the share image, leftover template text, and console errors. Log each issue as a finding with the URL, screen width and an annotated screenshot, and end with a report that scores design consistency, mobile, content and polish with the top fixes.

Fill in your details

Here, or later in the chat with your tester.

  • [SITE URL] The webflow.io staging URL or your live domain
  • [WHAT THE SITE IS FOR] One sentence about the site and its visitors

What the AI beta tester checks

  • Every breakpoint: overflow, wrapping, fixed heights
  • Navbar, dropdowns and anchor links on touch and desktop
  • Scroll and load interactions that hide content
  • CMS collection pages with long and empty content
  • Forms: validation, success and error states
  • Page titles, meta descriptions and Open Graph image
  • Placeholder and staging-domain links
  • Console errors from custom code and embeds

What you get

  • Findings per page with URL, width and annotated screenshot
  • A list of CMS items that break the template
  • A report scoring design consistency, mobile, content and polish
  • Top fixes before publishing to the custom domain

How to run it with betatest.ing

  1. Publish to your webflow.io staging domain and add it as a project.
  2. Send the Webflow site testing task with your CMS collections listed.
  3. The AI beta tester checks every page and breakpoint in a real browser.
  4. Fix, publish to the live domain and run a short re-test.

Tips

  • Point the tester at your longest and emptiest CMS items; samples always look fine.
  • Check widths between breakpoints, not only the four presets.
  • Avoid hiding essential content behind scroll interactions.
  • Re-test after editors publish big CMS changes.

Webflow site testing: FAQ

How do I test a Webflow site before publishing?

Publish to the webflow.io staging domain and check every breakpoint, interaction, CMS template, form, link and SEO setting, then repeat a short pass on the custom domain.

Can the AI tester check CMS pages?

Yes. Give it the collection list pages or a few item URLs and it checks how templates handle different content.

Does it test Webflow interactions?

It scrolls and clicks through pages like a visitor, so it notices content that never appears, animations that block clicks and layout jumps.

Will it submit my forms?

Only if you allow it. Otherwise it tests validation without submitting.

Can it test a password-protected staging site?

Yes, if you save the page password with the project.

Which breakpoints should I test on a Webflow site?

Test all four Webflow breakpoints (desktop, tablet, mobile landscape and mobile portrait) and resize between them, because large phones and small laptops often fall between the defaults. If you added larger breakpoints, test those too.

Should I test on the webflow.io domain or my custom domain?

Both. Test thoroughly on the webflow.io staging domain before launch, then run a shorter pass on the custom domain after publishing. That catches leftover staging links, domain redirects and SEO settings that only apply to the live site.

What should I fix first on a Webflow site?

Start with content visitors can't see or reach, such as failed scroll interactions, a broken mobile menu or cut-off sections. Next fix forms that don't deliver and broken links, then CMS template issues. Leave SEO defaults and visual polish for last.

Related beta testing guides

  • Website beta testing — A website beta test is a run-through of your site by someone who has never seen it, before real visitors do. This guide covers what breaks most often on marketing and content sites, how to set up the test, and a ready-to-run task your AI beta tester can start on right now.
  • Responsive design testing — Most layouts are designed on a wide screen and break quietly on a phone. This page explains which widths to test, the layout bugs that come up again and again, and a task your AI beta tester can run at phone and tablet sizes.
  • Landing page testing — A landing page has one job: make a visitor understand the offer and take the next step. Testing it means checking both that it works and that it is clear. This page covers what to check on a landing page before you send traffic to it, and a task your AI beta tester can run.
  • WordPress site testing — WordPress sites break in predictable places: plugin conflicts, forms that stop sending, caching, and theme updates that shift layouts. This checklist covers what to test before launch and after every update, and gives you a task your AI beta tester can run on the site.
  • Free tool: Free website test — Enter a URL, get an instant report: SEO basics, mobile, security headers, broken links and a score.

More in by product