diff --git a/app/compare/applitools/applitools-emblem.svg b/app/compare/applitools/applitools-emblem.svg new file mode 100644 index 0000000..92fa6c4 --- /dev/null +++ b/app/compare/applitools/applitools-emblem.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/compare/applitools/applitools-dark.svg b/app/compare/applitools/applitools-logo-dark.svg similarity index 100% rename from app/compare/applitools/applitools-dark.svg rename to app/compare/applitools/applitools-logo-dark.svg diff --git a/app/compare/applitools/applitools.svg b/app/compare/applitools/applitools-logo.svg similarity index 100% rename from app/compare/applitools/applitools.svg rename to app/compare/applitools/applitools-logo.svg diff --git a/app/compare/applitools/page.tsx b/app/compare/applitools/page.tsx index e8e7288..f019e16 100644 --- a/app/compare/applitools/page.tsx +++ b/app/compare/applitools/page.tsx @@ -11,31 +11,83 @@ import { TableSection, TrySection, } from "../common"; -import applitoolsDark from "./applitools-dark.svg"; -import applitools from "./applitools.svg"; +import { ComparisonTable, Features } from "../comparison-table"; +import applitoolsEmblem from "./applitools-emblem.svg"; +import applitoolsLogoDark from "./applitools-logo-dark.svg"; +import applitoolsLogo from "./applitools-logo.svg"; import { FAQ } from "./faq"; -import { ComparisonTable } from "./table"; export const metadata: Metadata = getMetadata({ absoluteTitle: "Argos, the alternative to Applitools", description: - "Explore a detailed comparison of Argos and Applitools, focusing on features, performance, and ease of use in visual testing.", + "Learn how Argos compares to Applitools and why Argos is the best alternative for visual testing.", pathname: "/compare/applitools", }); +const features: Features = { + pricing: { + argos: "Not public", + competitor: "$30/mo", + }, + playwrightDebugging: { + argos: "✔️", + competitor: "❌", + }, + playwrightTestRetries: { + argos: "✔️", + competitor: "❌", + }, + githubSso: { + argos: "✔️", + competitor: "❌", + }, + openSource: { + argos: "✔️", + competitor: "❌", + }, + beautifulAndIntuitiveUi: { + argos: "✔️", + competitor: "❌", + }, + bestScreenshotQuality: { + argos: "✔️", + competitor: "❌", + }, + githubActionsPartialReRuns: { + argos: "✔️", + competitor: "❌", + }, + githubLight: { + argos: "✔️", + competitor: "❌", + }, + monitoringMode: { + argos: "✔️", + competitor: "✔️", + }, + sensitivityThresholdPerScreenshot: { + argos: "✔️", + competitor: "❌", + }, +}; + export default function Page() { return ( <> - + diff --git a/app/compare/applitools/table.tsx b/app/compare/applitools/table.tsx deleted file mode 100644 index 0134301..0000000 --- a/app/compare/applitools/table.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import { Check, XIcon } from "lucide-react"; - -import { List, THead, Table, Td, Th, Tr } from "@/components/ComparisonTable"; - -export function ComparisonTable() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description - Applitools Eyes is recognized as one of the leading visual testing - tools. It uses AI to minimize false positives. Applitools offers a - highly configurable product tailored to meet the needs of enterprise - market companies. However, their UX/UI is functional but not - intuitive, and their high pricing can be prohibitive. - - Argos is an open-source visual testing tool that offers a - plug-and-play approach to catch visual regressions. Argos' strengths - are its well-crafted UI/UX and fast-growing product, driven by - first-hand usage and community feedback. Its transparent pricing and - seamless integrations make it a reliable choice for UI testing. -
CustomersFortune 500, Adidas, Chanel, Allianz, WixMeta, MUI, GitBook, Yotpo, Le Monde, Business Insider
Pricing - Not public. Contact for - pricing - Starting at $30/month
Pro -
- } - /> -
- 		- } - /> -
Cons - } - /> - - } - /> -
DeploymentCloud & On-premiseCloud & On-premise
DeviceWebsite & Mobile appWebsite & Mobile app
- ); -} diff --git a/app/compare/chromatic/chromatic-dark.svg b/app/compare/chromatic/chromatic-dark.svg deleted file mode 100644 index e4be716..0000000 --- a/app/compare/chromatic/chromatic-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/compare/chromatic/chromatic-emblem.svg b/app/compare/chromatic/chromatic-emblem.svg new file mode 100644 index 0000000..1893089 --- /dev/null +++ b/app/compare/chromatic/chromatic-emblem.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/app/compare/chromatic/chromatic-logo-dark.svg b/app/compare/chromatic/chromatic-logo-dark.svg new file mode 100644 index 0000000..fa9e2b9 --- /dev/null +++ b/app/compare/chromatic/chromatic-logo-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/compare/chromatic/chromatic-logo.svg b/app/compare/chromatic/chromatic-logo.svg new file mode 100644 index 0000000..fa9e2b9 --- /dev/null +++ b/app/compare/chromatic/chromatic-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/compare/chromatic/chromatic.svg b/app/compare/chromatic/chromatic.svg deleted file mode 100644 index 768471a..0000000 --- a/app/compare/chromatic/chromatic.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/compare/chromatic/page.tsx b/app/compare/chromatic/page.tsx index 6c9f1fc..9cb5a86 100644 --- a/app/compare/chromatic/page.tsx +++ b/app/compare/chromatic/page.tsx @@ -11,31 +11,83 @@ import { TableSection, TrySection, } from "../common"; -import chromaticDark from "./chromatic-dark.svg"; -import chromatic from "./chromatic.svg"; +import { ComparisonTable, Features } from "../comparison-table"; +import chromaticEmblem from "./chromatic-emblem.svg"; +import chromaticLogoDark from "./chromatic-logo-dark.svg"; +import chromaticLogo from "./chromatic-logo.svg"; import { FAQ } from "./faq"; -import { ComparisonTable } from "./table"; export const metadata: Metadata = getMetadata({ absoluteTitle: "Argos, the alternative to Chromatic", description: - "Explore the differences between Argos and Chromatic, highlighting their features, performance, and user experience in visual testing.", + "Learn how Argos compares to Chromatic and why Argos is the best alternative for visual testing.", pathname: "/compare/chromatic", }); +const features: Features = { + pricing: { + argos: "$30/mo", + competitor: "$599/mo", + }, + playwrightDebugging: { + argos: "✔️", + competitor: "❌", + }, + playwrightTestRetries: { + argos: "✔️", + competitor: "❌", + }, + githubSso: { + argos: "✔️", + competitor: "❌", + }, + openSource: { + argos: "✔️", + competitor: "❌", + }, + beautifulAndIntuitiveUi: { + argos: "✔️", + competitor: "✔️", + }, + bestScreenshotQuality: { + argos: "✔️", + competitor: "❌", + }, + githubActionsPartialReRuns: { + argos: "✔️", + competitor: "❌", + }, + githubLight: { + argos: "✔️", + competitor: "❌", + }, + monitoringMode: { + argos: "✔️", + competitor: "✔️", + }, + sensitivityThresholdPerScreenshot: { + argos: "✔️", + competitor: "❌", + }, +}; + export default function Page() { return ( <> - + diff --git a/app/compare/chromatic/table.tsx b/app/compare/chromatic/table.tsx deleted file mode 100644 index acfc93e..0000000 --- a/app/compare/chromatic/table.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Check, XIcon } from "lucide-react"; - -import { List, THead, Table, Td, Th, Tr } from "@/components/ComparisonTable"; - -export function ComparisonTable() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description - Chromatic is a comprehensive visual testing platform that integrates - seamlessly with Storybook. It provides powerful visual diffs, - interaction testing, and supports multiple browsers. While it offers - robust features, its dependency on Storybook and relatively higher - costs might not suit every team. - - Argos is an open-source visual testing tool that offers a - plug-and-play approach to catch visual regressions. Argos' strengths - are its well-crafted UI/UX and fast-growing product, driven by - first-hand usage and community feedback. Its transparent pricing and - seamless integrations make it a reliable choice for UI testing. -
CustomersGitHub, Adobe, Toyota, The Guardian, LegoMeta, MUI, GitBook, Yotpo, Le Monde, Business Insider
PricingStarting at $149/month (Chrome only)Starting at $30/month (all platforms)
Pro -
- } - /> -
- 		- } - /> -
Cons - } - /> - - } - /> -
DeploymentCloud & On-premiseCloud & On-premise
DeviceWebsite & Mobile appWebsite & Mobile app
- ); -} diff --git a/app/compare/common.tsx b/app/compare/common.tsx index 24e3f60..3271191 100644 --- a/app/compare/common.tsx +++ b/app/compare/common.tsx @@ -1,3 +1,4 @@ +import clsx from "clsx"; import { BlocksIcon, BookOpenTextIcon, @@ -9,7 +10,7 @@ import { import Image from "next/image"; import { Accordion } from "@/components/Accordion"; -import { ArgosLogo } from "@/components/ArgosLogo"; +import { ArgosEmblem } from "@/components/ArgosEmblem"; import { Button } from "@/components/Button"; import { Container } from "@/components/Container"; import { Feature, FeatureRow, FeatureSeparator } from "@/components/Feature"; @@ -19,37 +20,44 @@ import { Link } from "@/components/Link"; export function HeroSection(props: { title: React.ReactNode; description: React.ReactNode; - logoSrc: string; - logoSrcDark: string; - logoAlt: string; + emblemSrc: string; + emblemSrcDark?: string; + emblemAlt: string; }) { return ( - +
-
- Compare -
-

- {props.title} -

-

{props.description}

-
-
- {props.logoAlt} +
+
{props.logoAlt} + {props.emblemSrcDark && ( + {props.emblemAlt} + )}
-
- +
+
+

+ {props.title} +

+

{props.description}

+
+
+
+
@@ -104,12 +112,7 @@ export function KeyFeaturesSection() { - We #buildInPublic{" "} - to improve state of the art and support impactful projects. - - } + text="Argos is open source, you can contribute to the project on GitHub." /> diff --git a/app/compare/comparison-table.tsx b/app/compare/comparison-table.tsx new file mode 100644 index 0000000..aa7df72 --- /dev/null +++ b/app/compare/comparison-table.tsx @@ -0,0 +1,178 @@ +import { CircleXIcon, XIcon } from "lucide-react"; + +import { + Check, + THead, + Table, + Td, + Th, + ThMain, + ThSub, + ThSubLink, + Tr, + X, +} from "@/components/ComparisonTable"; + +type Feature = { argos: React.ReactNode; competitor: React.ReactNode }; + +export type Features = { + pricing: Feature; + playwrightDebugging: Feature; + playwrightTestRetries: Feature; + githubSso: Feature; + openSource: Feature; + githubLight: Feature; + sensitivityThresholdPerScreenshot: Feature; + githubActionsPartialReRuns: Feature; + bestScreenshotQuality: Feature; + monitoringMode: Feature; + beautifulAndIntuitiveUi: Feature; +}; + +function FeatureTd(props: { value: React.ReactNode }) { + return ( + + {props.value === "✔️" ? ( + + ) : props.value === "❌" ? ( + + ) : ( + props.value + )} + + ); +} + +function Feature(props: { feature: Feature }) { + return ( + <> + + + + ); +} + +export function ComparisonTable(props: { + title: string; + logoSrc: string; + logoSrcDark?: string; + features: Features; +}) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Monthly pricing + How much it costs per month +
+ Playwright debugging + + Playwright trace viewer and failure screenshots + +
+ Playwright test retries + + Separate test retries to have a clear overview + +
+ GitHub SSO + + Synchronize your GitHub users with Argos + +
+ Open Source + + SDK and platform code available + +
+ GitHub integration without code access + + Offer a mode without content permission required + +
+ Sensitivity threshold per screenshot + + Set a threshold by screenshot to reduce flakiness. + +
+ GitHub Actions partial re-runs + + Save time and resources with partial re-runs. + +
+ High screenshot quality + + Don't miss any detail with enhanced quality. + +
+ Monitoring mode + + Run periodic checks on your website. + +
+ Beautiful and intuitive UI + Designed to be effective. +
+ ); +} diff --git a/app/compare/percy/page.tsx b/app/compare/percy/page.tsx index c7aba5c..b247f8f 100644 --- a/app/compare/percy/page.tsx +++ b/app/compare/percy/page.tsx @@ -11,15 +11,64 @@ import { TableSection, TrySection, } from "../common"; +import { ComparisonTable, Features } from "../comparison-table"; import { FAQ } from "./faq"; -import percyDark from "./percy-dark.svg"; -import percy from "./percy.svg"; -import { ComparisonTable } from "./table"; +import percyEmblemDark from "./percy-emblem-dark.svg"; +import percyEmblem from "./percy-emblem.svg"; +import percyLogoDark from "./percy-logo-dark.svg"; +import percyLogo from "./percy-logo.svg"; + +const features: Features = { + pricing: { + argos: "$30/mo", + competitor: "$599/mo", + }, + playwrightDebugging: { + argos: "✔️", + competitor: "❌", + }, + playwrightTestRetries: { + argos: "✔️", + competitor: "❌", + }, + githubSso: { + argos: "✔️", + competitor: "❌", + }, + openSource: { + argos: "✔️", + competitor: "❌", + }, + beautifulAndIntuitiveUi: { + argos: "✔️", + competitor: "❌", + }, + bestScreenshotQuality: { + argos: "✔️", + competitor: "❌", + }, + githubActionsPartialReRuns: { + argos: "✔️", + competitor: "❌", + }, + githubLight: { + argos: "✔️", + competitor: "❌", + }, + monitoringMode: { + argos: "✔️", + competitor: "✔️", + }, + sensitivityThresholdPerScreenshot: { + argos: "✔️", + competitor: "❌", + }, +}; export const metadata: Metadata = getMetadata({ absoluteTitle: "Argos, the alternative to Percy Browserstack", description: - "Compare Argos and Percy Browserstack in detail, focusing on their features, performance, and ease of use for visual testing.", + "Learn how Argos compares to Percy and why Argos is the best alternative for visual testing.", pathname: "/compare/percy", }); @@ -28,14 +77,19 @@ export default function Page() { <> - + diff --git a/app/compare/percy/percy-dark.svg b/app/compare/percy/percy-dark.svg deleted file mode 100644 index 22de1df..0000000 --- a/app/compare/percy/percy-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/compare/percy/percy-emblem-dark.svg b/app/compare/percy/percy-emblem-dark.svg new file mode 100644 index 0000000..ea48582 --- /dev/null +++ b/app/compare/percy/percy-emblem-dark.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/compare/percy/percy-emblem.svg b/app/compare/percy/percy-emblem.svg new file mode 100644 index 0000000..548f22c --- /dev/null +++ b/app/compare/percy/percy-emblem.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/app/compare/percy/percy-logo-dark.svg b/app/compare/percy/percy-logo-dark.svg new file mode 100644 index 0000000..20d05de --- /dev/null +++ b/app/compare/percy/percy-logo-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/compare/percy/percy-logo.svg b/app/compare/percy/percy-logo.svg new file mode 100644 index 0000000..6f06e8a --- /dev/null +++ b/app/compare/percy/percy-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/compare/percy/percy.svg b/app/compare/percy/percy.svg deleted file mode 100644 index 5bd16a5..0000000 --- a/app/compare/percy/percy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/compare/percy/table.tsx b/app/compare/percy/table.tsx deleted file mode 100644 index 2f4366f..0000000 --- a/app/compare/percy/table.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Check, XIcon } from "lucide-react"; - -import { List, THead, Table, Td, Th, Tr } from "@/components/ComparisonTable"; - -export function ComparisonTable() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description - Percy is a widely-used testing platform that integrates with CI/CD - pipelines. It offers visual diffs and regression detection with a - straightforward interface. However, Percy’s pricing can be a barrier - for small teams and scaling projects. - - Argos is an open-source visual testing tool that offers a - plug-and-play approach to catch visual regressions. Argos' strengths - are its well-crafted UI/UX and fast-growing product, driven by - first-hand usage and community feedback. Its transparent pricing and - seamless integrations make it a reliable choice for UI testing. -
CustomersDollar shave club, Shopify, Canva, Google, FastlyMeta, MUI, GitBook, Yotpo, Le Monde, Business Insider
- Pricing{" "} -
(desktop & mobile)
- 		Starting at $599/monthStarting at $30/month
Pro -
- } - /> -
- 		- } - /> -
Cons - } - /> - - } - /> -
DeploymentCloud & On-premiseCloud & On-premise
DeviceWebsite & Mobile appWebsite & Mobile app
- ); -} diff --git a/components/ComparisonTable.tsx b/components/ComparisonTable.tsx index 665ce77..6bce380 100644 --- a/components/ComparisonTable.tsx +++ b/components/ComparisonTable.tsx @@ -1,10 +1,37 @@ import clsx from "clsx"; +import { ArrowUpRightIcon, CircleCheckIcon, CircleXIcon } from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; import { twc } from "react-twc"; -export const Table = twc.table`w-full min-w-[50em] table-fixed`; +import { ArgosLogo } from "./ArgosLogo"; + +export const Table = twc.table`w-full min-w-[50em]`; export const Tr = twc.tr`border-b border-dashed border-violet-6 align-baseline md:[&>th]:whitespace-nowrap`; -export const Td = twc.td`px-3 py-4`; -export const Th = twc.th`px-3 py-4 text-left font-normal text-low`; +export const Td = twc.td`p-4 text-center align-middle`; +export const Th = twc.th`p-3 md:p-6 text-left font-normal`; +export const ThMain = twc.div`font-semibold`; + +export function ThSubLink( + props: { children: React.ReactNode } & { href: string; target?: "_blank" }, +) { + const { children, ...linkProps } = props; + const Component = props.target === "_blank" ? "a" : Link; + return ( + + {props.children} + + + ); +} + +export const ThSub = twc.div`text-sm text-low`; + +export const Check = twc(CircleCheckIcon)`inline-block text-violet-10`; +export const X = twc(CircleXIcon)`inline-block text-low`; export function List(props: { list: string[]; @@ -44,16 +71,31 @@ export function List(props: { ); } -export function THead(props: { title: React.ReactNode }) { +export function THead(props: { + title: string; + logoSrc: string; + logoSrcDark?: string; +}) { return ( - - - -
{props.title}
+ + + + - -
Argos
+ + {props.title} + {props.logoSrcDark && ( + {props.title} + )}