Picture elements are captured, including art direction

[skitterm]

Issue: #AP-3783

What Changed

We now properly snapshot <picture> elements.

Background

A <picture> element can have multiple child elements, but has to have exactly one <img> element (the img is used as a fallback in case none of the sources are supported or match the media queries/pixel densities provided).

Our solution

Similar to @tevanoff's img srcset fix, we'll see if any of the <picture>'s <source> or <img> tags' srcset or src properties match an an item in our asset map. If so, we'll blow away all the <source>s of the <picture> tag and modify the existing <img> tag with the src set to the archived resource.

We take care not to modify other attributes of the <img> tag, (like class), as we don't want to affect the original styling of the picture.

How to test

We only need to manually test Cypress for mobile screens:

1. Create a new (or use an existing) Cypress Chromatic project
2. Create a page-under-test that renders a <picture> element with multiple <source>s that have differing image URLs -- one for desktop, one for mobile (see here for example HTML, but better if you write your own)
3. Create a Cypress test that tests this page in mobile-sized view (see here for example)
4. Create a Cypress test that tests this page in desk-top sized view (can just omit the viewport options)
5. Run Cypress and Chromatic
6. In the small-test Chromatic snapshot, verify that the small-sized image is captured
7. In the large-test Chromatic snapshot, verify that the large-sized image is captured

The automated tests cover the rest:

• Unit tests assure the nuts-and-bolts of picture-source-finding work
• UI Tests assure that we 1) capture <picture> elements', well, pictures, as well as get the right one in the right circumstance

• Author QA
• Reviewer QA

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.22% (target: -1.00%)	✅ 100.00% (target: 80.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (875e1a6)	294	280	95.24%
Head commit (86a0672)	308 (+14)	294 (+14)	95.45% (+0.22%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#208)	14	14	100.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[thafryer]

Looks good with a few notes

[andrewortwein]

🎆🎇🌠👍🏻