Disable chromatic snapshots on flaky tests.

dotcom-rendering/src/components/ArticleHeadline.stories.tsx

@@ -253,6 +253,14 @@ export const EditorialDesign = {
 	},
 } satisfies Story;
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. It is unclear to whether it is the icon, the
+ * image, the font, or something else that is causing the issue.
+ *
+ * Example: https://www.chromatic.com/test?appId=637e406971a9af18ddba0505&id=665eecc338adeba89d31f92b
+ */
 export const MatchReportDesignSportTheme = {
 	args: {
 		...StandardDesign.args,
@@ -263,6 +271,9 @@ export const MatchReportDesignSportTheme = {
 		},
 	},
 	name: 'MatchReport Design, Sport Theme',
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 } satisfies Story;
 
 export const LiveBlogDesign = {

dotcom-rendering/src/components/Discussion/Comments.stories.tsx

@@ -159,6 +159,14 @@ InitialPage.decorators = [
 	]),
 ];
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. The monospaced
+ * text: "code" is often different in the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=6659d8e7fde909fdd4dbf8b9
+ */
 export const LoggedInHiddenNoPicks = () => {
 	return (
 		<div
@@ -199,6 +207,9 @@ export const LoggedInHiddenNoPicks = () => {
 LoggedInHiddenNoPicks.storyName =
 	'when logged in, with no picks and not expanded';
 LoggedInHiddenNoPicks.decorators = [splitTheme([format])];
+LoggedInHiddenNoPicks.story = {
+	chromatic: { disable: true },
+};
 
 export const LoggedIn = () => {
 	return (

dotcom-rendering/src/components/DocumentBlockComponent.stories.tsx

@@ -4,6 +4,9 @@ import { DocumentBlockComponent } from './DocumentBlockComponent.importable';
 export default {
 	component: DocumentBlockComponent,
 	title: 'Components/DocumentBlockComponent',
+	parameters: {
+		chromatic: { disableSnapshot: true },
+	},
 };
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -17,6 +20,15 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
 	</div>
 );
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. The text: "fit width" in
+ * the button in the bottom-right sometimes causes a difference.
+ * often different in the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=676405bf6014bfa8ccddc7be
+ */
 export const documentEmbed = () => {
 	return (
 		<Wrapper>
@@ -43,3 +55,6 @@ export const documentEmbed = () => {
 	);
 };
 documentEmbed.storyName = 'document embed';
+documentEmbed.story = {
+	chromatic: { disable: true },
+};

dotcom-rendering/src/components/VimeoBlockComponent.stories.tsx

@@ -69,6 +69,14 @@ largeAspectRatio.story = {
 	chromatic: { disable: true },
 };
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently. Sometimes the video doesn't load
+ * with the error message: "We couldn't verify the security of your connection."
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=6762b11e0dbf28eb24702ff1
+ */
 export const verticalAspectRatio = () => {
 	return (
 		<Wrapper>
@@ -92,3 +100,6 @@ export const verticalAspectRatio = () => {
 	);
 };
 verticalAspectRatio.storyName = 'with vertical aspect ratio';
+verticalAspectRatio.story = {
+	chromatic: { disable: true },
+};

dotcom-rendering/src/layouts/DecideLayout.stories.tsx

@@ -222,12 +222,23 @@ export const AppsPictureShowcaseOpinionDark: Story = {
 	parameters: appsParameters,
 };
 
+/**
+ * Skipped (flaky).
+ *
+ * This story fails intermittently as an iframe is inserted into the page
+ * which is sometimes registered by the snapshot.
+ *
+ * Example: https://www.chromatic.com/test?appId=63e251470cfbe61776b0ef19&id=675aaa4f3aa384bd64bde3a1
+ */
 export const WebPhotoEssayImmersiveLabsLight: Story = {
 	args: {
 		article: enhanceArticleType(PhotoEssayImmersiveLabsFixture, 'Web')
 			.frontendData,
 	},
-	parameters: webParameters,
+	parameters: {
+		...webParameters,
+		chromatic: { disableSnapshot: true },
+	},
 };
 
 const standardStandardLabsWebFixture: ArticleDeprecated = {