Picture elements are captured, including art direction

.changeset/eighty-bikes-peel.md

@@ -0,0 +1,7 @@
+---
+'@chromatic-com/playwright': minor
+'@chromatic-com/cypress': minor
+'@chromatic-com/shared-e2e': minor
+---
+
+Picture tags are archived

packages/cypress/tests/cypress/e2e/archiving-assets.cy.ts

@@ -39,6 +39,42 @@ it('srcset is used to determine image asset URL', () => {
   cy.visit('/asset-paths/srcset');
 });
 
+it('picture source is captured, multiple source elements', () => {
+  cy.visit('/asset-paths/picture');
+});
+
+// TODO: Unskip when we use one-archive-per-test in Cypress (like we do in Playwright)
+// currently, we use one archive for all the tests, but in this case it means we capture
+// the wrong image (since the unmatching images are already in the global archive, we
+// mistakenly assume they were "captured" by this test and use them instead of the fallback image)
+context.skip('mobile', { viewportWidth: 500, viewportHeight: 500 }, () => {
+  it('picture source is captured, multiple source elements', () => {
+    cy.visit('/asset-paths/picture');
+  });
+});
+
+// TODO: Unskip when we use one-archive-per-test in Cypress (like we do in Playwright)
+// currently, we use one archive for all the tests, but in this case it means we capture
+// the wrong image (since the unmatching images are already in the global archive, we
+// mistakenly assume they were "captured" by this test and use them instead of the fallback image)
+it.skip('picture captures fallback image', () => {
+  cy.visit('/asset-paths/picture-no-matching-source');
+});
+
+it('picture source is captured, single source with srcset', () => {
+  cy.visit('/asset-paths/picture-multiple-srcset');
+});
+
+// TODO: Unskip when we use one-archive-per-test in Cypress (like we do in Playwright)
+// currently, we use one archive for all the tests, but in this case it means we capture
+// the wrong image (since the unmatching images are already in the global archive, we
+// mistakenly assume they were "captured" by this test and use them instead of the fallback image)
+context.skip('mobile', { viewportWidth: 500, viewportHeight: 500 }, () => {
+  it('picture source is captured, single source with srcset', () => {
+    cy.visit('/asset-paths/picture-multiple-srcset');
+  });
+});
+
 it('external CSS files are inlined', () => {
   cy.visit('/asset-paths/external-css-files');
 });

packages/playwright/tests/archiving-assets.spec.ts

@@ -49,6 +49,18 @@ test('srcset is used to determine image asset URL', async ({ page }) => {
   await page.goto('/asset-paths/srcset');
 });
 
+test('picture source is captured, multiple source elements', async ({ page }) => {
+  await page.goto('/asset-paths/picture');
+});
+
+test('picture source is captured, single source with srcset', async ({ page }) => {
+  await page.goto('/asset-paths/picture-multiple-srcset');
+});
+
+test('picture captures fallback image', async ({ page }) => {
+  await page.goto('/asset-paths/picture-no-matching-source');
+});
+
 test('external CSS files are inlined', async ({ page }) => {
   await page.goto('/asset-paths/external-css-files');
 });