Merge pull request #4891 from JetBrains/add-test-selectors

chore: add test selectors

Author: zoobestik

blocks/main/hero/hero.tsx

@@ -37,7 +37,7 @@ export const HeroSection: FC<Props> = ({ children, title }) => {
 
     return (
         <ThemeProvider theme={'dark'}>
-            <section className={cn(styles.heroSection)}>
+            <section className={cn(styles.heroSection)} data-testid={"hero-block"}>
                 <div className={cn('ktl-layout', 'ktl-layout--center', 'hero-b')}>
                     <div className={styles.grid}>
                         <div className={styles.content}>

blocks/main/kotlin-plus-ai/index.tsx

@@ -33,7 +33,7 @@ function KotlinPlusAI() {
 
     return (
         <ThemeProvider theme="dark">
-            <div className={styles.wrapper} id="kotlin-plus-ai">
+            <div className={styles.wrapper} id="kotlin-plus-ai" data-testid={"kotlin-plus-ai-block"}>
                 <h2 className={cn(classTitle, styles.introTitle)}>Kotlin + AI</h2>
                 <p className={introClass}>JetBrains is investing in AI models tailored for Kotlin, providing open data,
                     benchmarks, and AI-native tooling integrated into your workflow.</p>
@@ -59,8 +59,9 @@ function KotlinPlusAI() {
                             developing a simple chat assistant or an advanced multi-step workflow, Koog gives you full
                             control with clean Kotlin code – no external services are required. Build, extend, and
                             experiment with AI agents entirely in Kotlin.</p>
-                        <Button mode="rock" size={size} className={styles.getStarted} href="https://docs.koog.ai/">Get
-                            started</Button>
+                        <Button mode="rock" size={size} className={styles.getStarted} href="https://docs.koog.ai/">
+                            Get started
+                        </Button>
                     </div>
                     <BlockScheme className={styles.buildAgentsScheme} />
                 </div>

blocks/main/why-kotlin/why-kotlin.tsx

@@ -84,7 +84,7 @@ export const WhyKotlin: FC<Props> = ({}) => {
 
     return (
         <ThemeProvider theme={'dark'}>
-            <section className={styles.whyKotlin} data-test={'main-page-why-kotlin'}>
+            <section className={styles.whyKotlin} data-testid={'why-kotlin-block'}>
                 <div className={cn('ktl-layout', 'ktl-layout--center')}>
                     <div className={cn(darkTextCn(headerClass), styles.sectionTitle)}>Why Kotlin?</div>
                 </div>

pages/index.tsx

@@ -243,7 +243,7 @@ function Index() {
                         className={styles.ctaBlock}
                         mainTitle={<>Start using{isTS && <br />} Kotlin today!</>}
                         buttons={
-                            <Button href="/docs/getting-started.html" size="l" mode="rock" theme="light">
+                            <Button href="/docs/getting-started.html" size="l" mode="rock" theme="light" data-testid={'cta-get-started-button'}>
                                 Get started
                             </Button>
                         }

test/page/index-page.ts

@@ -14,7 +14,7 @@ export class IndexPage implements PageWithGlobalSearch {
 
     async init() {
         await this.page.goto('/');
-
-        await this.page.waitForSelector(testSelector('main-page-why-kotlin'));
+        const whyKotlinBlock  = this.page.getByTestId('why-kotlin-block');
+        await whyKotlinBlock.waitFor();
     }
 }