Merge pull request JetBrains#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();
  }
 }