import React, { useRef, useEffect } from 'react'
import clsx from 'clsx'
import Layout from '@theme/Layout'
import CodeBlock from '@theme/CodeBlock'
import Link from '@docusaurus/Link'
import Translate, { translate } from '@docusaurus/Translate'
import useBaseUrl from '@docusaurus/useBaseUrl'
import LogoCarousel from '../components/LogoCarousel.tsx'
import Features from '../components/Features.tsx'
import Section from '../components/Section.tsx'
import ImageSwitcher from '../components/ImageSwitcher.tsx'
import Highlight from '../components/Highlight.tsx'
import Robot from '../components/Robot.tsx'
import Sponsors from '../components/Sponsors.tsx'
import { CreateProjectAnimation } from '../components/CreateProjectAnimation.tsx'
import ContributorList from '../components/Contributors/Contributors.tsx'
import styles from './styles.module.css'
import { logos, features, LHIntregrationExample, SetupExample, ComponentTestingExample } from '../constants.tsx'
const tagline = translate({
id: 'homepage.tagline',
message: 'Next-gen browser and mobile automation test framework for Node.js'
})
function Home() {
const ref = useRef(null)
useEffect(() => {
if (!window.Ribbons) {
return
}
new window.Ribbons({
colorSaturation: '60%',
colorBrightness: '50%',
colorAlpha: 0.2,
colorCycleSpeed: 5,
verticalPosition: 'random',
horizontalSpeed: 100,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true,
element: ref.current
})
})
return (
<Layout
title={`WebdriverIO · ${tagline}`}
description={tagline}>
<header className={clsx('hero hero--primary', styles.heroBanner)} ref={ref}>
<div className="container">
<h1 className="hero__title">
<Robot />
</h1>
<p className="hero__subtitle">
{tagline}
</p>
<div className={styles.buttons}>
<Link
className={clsx(
'button button--outline button--secondary button--lg',
styles.getStarted,
)}
to={useBaseUrl('/docs/gettingstarted')}
>
<Translate id="homepage.getStarted">Get Started</Translate>
</Link>
<Link
to="/docs/why-webdriverio"
className={clsx(
'button button--outline button--secondary button--lg',
styles.getStarted,
)}
>
<Translate id="homepage.whyWebdriverIO">Why WebdriverIO?</Translate>
</Link>
<Link
to="https://github.com/webdriverio"
className={clsx(
'button button--outline button--secondary button--lg',
styles.getStarted,
)}
>
<Translate id="homepage.viewOnGitHub">View on GitHub</Translate>
</Link>
<Link
to="https://youtube.com/@webdriverio"
className={clsx(
'button button--outline button--secondary button--lg',
styles.getStarted,
)}
>
<Translate id="homepage.watchOnYouTube">Watch on YouTube</Translate>
</Link>
</div>
<section className="sponsorSection">
<div>
<em><Translate id="homepage.sponsorSection.sponsoredBy">Sponsored by</Translate></em>
<ImageSwitcher
target="_blank"
lightImageSrc="/img/sponsors/browserstack_black.svg"
darkImageSrc="/img/sponsors/browserstack_white.svg"
alt="BrowserStack"
link="https://www.browserstack.com/automation-webdriverio"
/>
</div>
</section>
<Features features={features} />
</div>
</header>
<main>
<Highlight
img={<CodeBlock language="js" children={ComponentTestingExample}></CodeBlock>}
isDark
title={translate({
id: 'homepage.componentTesting.heading',
message: 'E2E and Unit / Component Testing in real Browser!'
})}
text={<>
<p>
<Translate
id="homepage.componentTesting.para1"
values={{
allInOne: (<b><Translate id="homepage.componentTesting.allInOne">all in one</Translate></b>),
usedBy: (<b><Translate id="homepage.componentTesting.usedBy">used by your users</Translate></b>)
}}>
{'WebdriverIO is an {allInOne} framework for your web app development. It enables you to run ' +
'small and lightweight component tests as well as running e2e test scenarios in the browser or on ' +
'a mobile device. This guarantees that you to do the testing in an environment {usedBy}.'}
</Translate>
</p>
<p>
<Translate
id="homepage.componentTesting.para2"
values={{ reactComponents: (<b>React components</b>) }}>
{'It comes with smart selector strategies that simplify interacting e.g. with {reactComponents} or ' +
'running deep selector queries with nested shadow DOM trees. As interactions happen through a standardized ' +
'automation protocol it is guaranteed they behave natively and aren\'t just JavaScript emulated.'}
</Translate>
</p>
<div>
<h4><Translate id="homepage.componentTesting.easySetup">Easy setup for web component testing with:</Translate></h4>
<a href="/docs/component-testing/react" className={styles.frameworkLogos}><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K" alt="" /></a>
<a href="/docs/component-testing/vue" className={styles.frameworkLogos}><img src="/img/icons/vue.png" alt="Vue.js" /></a>
<a href="/docs/component-testing/vue#testing-vue-components-in-nuxt" className={styles.frameworkLogos}><img src="/img/icons/nuxt.svg" alt="Nuxt" /></a>
<a href="/docs/component-testing/svelte" className={styles.frameworkLogos}><img src="/img/icons/svelte.png" alt="Svelte" /></a>
<a href="/docs/component-testing/preact" className={styles.frameworkLogos}><img src="/img/icons/preact.png" alt="Preact" /></a>
<a href="/docs/component-testing/solid" className={styles.frameworkLogos}><img src="/img/icons/solidjs.svg" alt="SolidJS" /></a>
<a href="/docs/component-testing/lit" className={styles.frameworkLogos}><img src="/img/icons/lit.svg" alt="Lit" /></a>
<a href="/docs/component-testing/stencil" className={styles.frameworkLogos}><img src="/img/icons/stencil.svg" alt="Stencil" /></a>
</div>
</>} reversed={undefined} />
<Highlight
img={<CreateProjectAnimation />}
reversed
title={translate({
id: 'homepage.hightlight.createProject',
message: 'Get Started With WebdriverIO within Seconds'
})}
text={<>
<p>
<Translate id="homepage.hightlight.createProject.para1">
The WebdriverIO testrunner comes with a command line interface that
provides a powerful configuration utility and helps you to create your
test setup in less than a minute. It lets you pick from available
test framework integrations and easily allows to add all supported
reporter and service plugins!
</Translate>
<br />
<br />
<Translate id="homepage.hightlight.createProject.para2">
With just one simple command you can set up a complete test suite:
</Translate>
</p>
<div>
<CodeBlock className="bash" children={SetupExample}></CodeBlock>
</div>
<p>
<Translate
id="homepage.highlight.getStartedOnYouTube"
values={{
youtubeLink: (
<Link to="https://www.youtube.com/watch?v=GAc031zGWTM&list=PLPO0LFyCaSo3oedws079pCNtppXAZdjv6">
<Translate
id="homepage.highlight.getStartedOnYouTube.label;"
description="The label for the link to my YouTube">
on YouTube
</Translate>
</Link>
)
}}>
{'Start learning more about WebdriverIO and how to get started {youtubeLink}.'}
</Translate>
</p>
</>} isDark={undefined} />
<Highlight
img={<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/CHcjEI3YZ7Y"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />}
isDark
title={translate({
id: 'homepage.hightlight.watch',
message: 'Watch Talks about WebdriverIO'
})}
text={<>
<p>
<Translate
id="homepage.highlight.conferenceTalk"
values={{
youtubeLink: (
<Link to="https://www.youtube.com/watch?v=CHcjEI3YZ7Y">
<Translate
id="homepage.highlight.conferenceTalk.label"
description="The conference talk title">
My favourite features of WebdriverIO
</Translate>
</Link>
),
videoAuthor: (
<Link to="https://twitter.com/ailuj876">
Julia Pottinger
</Link>
),
conferenceLink: (
<Link to="https://openqualityconf.com/">
Open Quality Conference
</Link>
)
}}>
{'The community around WebdriverIO is actively speaking on various user groups or ' +
'conferences about specific topics around automated testing with WebdriverIO. Check out ' +
'this talk on {youtubeLink} by {videoAuthor} at {conferenceLink}.'}
</Translate>
</p>
<p>
<Translate
id="homepage.highlight.youtubeChannels"
values={{
channelOne: (
<Link to="https://www.youtube.com/user/medigerati/videos?flow=grid&sort=p&view=0">
Klamping
</Link>
),
channelTwo: (
<Link to="https://www.youtube.com/channel/UCqaDA1xslraCbam2CxuKhUw">
Seventeenth Sep
</Link>
),
channelThree: (
<Link to="https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN">
Automation Bro
</Link>
)
}}>
{'There is also many YouTube Channels with useful tutorials by community members ' +
'such as {channelOne}, {channelTwo} or {channelThree}.'}
</Translate>
</p>
</>} reversed={undefined} />
<Highlight
img={<CodeBlock language="js" children={LHIntregrationExample}></CodeBlock>}
reversed
title={translate({
id: 'homepage.hightlight.lighthouse',
message: 'Google Lighthouse Integration'
})}
text={<>
<p>
<Translate
id="homepage.highlight.devtools"
values={{
devtoolsLink: (
<Link to="https://chromedevtools.github.io/devtools-protocol/">
Chrome DevTools
</Link>
),
lighthouseLink: (
<Link to="https://developers.google.com/web/tools/lighthouse">
Google Lighthouse
</Link>
),
devtoolsServiceLink: (
<Link to={useBaseUrl('/docs/lighthouse-service')}>
<code>@wdio/lighthouse-service</code>
</Link>
)
}}>
{'WebdriverIO not only runs automation based on the WebDriver protocol, it also leverages ' +
'native browser APIs to enable integrations to popular developer tools such as ' +
'{devtoolsLink} or {lighthouseLink}. With the {devtoolsServiceLink} plugin you have access to ' +
'commands for validating if you app is a valid PWA application as well as to commands for ' +
'capturing frontend performance metrics such as `speedIndex` and others.'}
</Translate>
</p>
<div>
<h4><Translate id="homepage.hightlight.devtools">Integration to developer tools such as:</Translate></h4>
<a href="https://chromedevtools.github.io/devtools-protocol" className={styles.frameworkLogos}><img src="/img/icons/devtools.png" alt="Chrome DevTools" /></a>
<a href="https://developers.google.com/web/tools/lighthouse" className={styles.frameworkLogos}><img src="/img/icons/lighthouse-logo.svg" alt="Google Lighthouse" /></a>
<a href="https://www.deque.com/axe/" className={styles.frameworkLogos}><img src="/img/icons/axe.png" alt="Axe Accessibility Engine" /></a>
</div>
</>} isDark={undefined} />
<Section isDark={true}>
<LogoCarousel logos={logos}></LogoCarousel>
</Section>
<Section>
<Sponsors />
</Section>
<Section isDark={true}>
<ContributorList />
</Section>
</main>
</Layout>
)
}
export default Home
