test(e2e): verify Cloudinary image delivery on front-end#1177
Open
utkarshcloudinary wants to merge 7 commits into
Open
test(e2e): verify Cloudinary image delivery on front-end#1177utkarshcloudinary wants to merge 7 commits into
utkarshcloudinary wants to merge 7 commits into
Conversation
- Inline selector scoped to .wp-block-image so the featured image (which some themes also tag with wp-image-<ID>) is not double-counted. - After post creation, run 'wp cloudinary sync' so the asset is pushed to Cloudinary before the front-end visit; otherwise the plugin only queues the sync on the first render and the page still shows local URLs. - Wait for the lazy-load JS to swap the SVG-placeholder src for the real Cloudinary URL via scrollIntoViewIfNeeded + an http(s) src expectation. - Switch cleanup to WP-CLI; building 'force=true' onto the wp-env rest_route-style REST URL is fragile.
The previous version waited for the plugin's lazy-load JS to swap the SVG placeholder in 'src' for a real Cloudinary URL. That swap depends on IntersectionObserver firing and the placeholder's onload callback, which is unreliable in headless CI (the GitHub Actions run timed out on toHaveAttribute(src, /http/) on all 3 attempts). Switch to asserting the plugin's own server-rendered marker (data-public-id) plus, opportunistically, validating any HTTP(S) URL present in src or srcset. The marker is deterministic; the URL check remains real because we still require at least one HTTP(S) URL across the two images to confirm we are not just trusting the marker. Also bump the fixture from 320x240 to 1200x900 so themes consistently emit srcset (WP only generates intermediate sizes above ~600px), giving the URL check something to validate even when src remains the placeholder.
Collaborator
Author
|
@gabrielcld2 This is ready for review. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Approach
Adds a Playwright e2e test that verifies images on the WordPress front-end are served from Cloudinary once the plugin is configured with valid credentials.
New files
tests/e2e/cloudinary-image-delivery.spec.js— the spec.tests/e2e/utils/connection.js— helper that connects the plugin via WP-CLI (cloudinary_connectoption) and parses the cloud name out ofCLOUDINARY_E2E_URL.tests/e2e/fixtures/test-image.jpg— small (~2KB) JPEG fixture.What the test does
beforeAll: connect the plugin via WP-CLI usingCLOUDINARY_E2E_URL(no UI walk; that path is covered by the wizard spec).beforeEach: upload the fixture via the WP REST media endpoint, create a published post that uses the attachment as both the featured image and an inline image block, then runwp cloudinary syncso the asset is pushed to Cloudinary deterministically.srcstarts as an SVG placeholder until JS replaces it), then assert that the resolvedsrc(and the firstsrcsetcandidate when present) for both the featured image and the inline image have hostres.cloudinary.comand a pathname starting with/<cloud_name>/.afterEach: delete the post and attachment via WP-CLI.Decisions worth flagging
.wp-block-imagebecause Twenty Twenty-Five tags the featured image withwp-image-<ID>too.force=trueto the?rest_route=-style REST URL fragile.f_auto,q_auto, etc.). The intent is to catch a regression where URLs stop being rewritten at all; transformation specifics are an implementation detail of the plugin and likely to evolve.QA notes
Requires
CLOUDINARY_E2E_URLto be set (already wired via.envand the e2e workflow secret).Expected: 1 passed in ~13s. Full suite (
npm run test:e2e) should report 8 passed.To inspect the run: