Skip to content

Autotests for navbar buttons. #4982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions test/production/navbar_buttons.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { test, expect } from '@playwright/test';

test.describe('Navbar buttons', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest renaming the test: this part of navigation we call "header".
Also, there is a test in the master branch, api navigation. What do you think about unifying them into one file and calling it header.spec.ts? I would expect to have all the header tests related to it in one place.

test.beforeEach(async ({ page }) => {
await page.goto('/');
await page.waitForSelector('button.ch2-btn.ch2-btn-primary');
await page.click('button.ch2-btn.ch2-btn-primary');
});

test('Kotlin logo opens the homepage', async ({ page }) => {
const kotlinLogo = page.locator('.ktl-logo-large-module_link_AOGas');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The locators should be change to not use classes and especially classes with hashes like "_AOGas". They may change after an update, and we'll be forced to update the tests.
My suggestion: we need to add data-testid for the header elements.

await expect(kotlinLogo).toBeVisible();
await kotlinLogo.click();
await expect(page.url()).toContain('https://kotlinlang.org/');
});

test('Kotlin version link opens the related GitHub page', async ({ page, context }) => {
const versionLink = page.locator('.ktl-logo-large-module_version-tag_k12Hw');
await expect(versionLink).toBeVisible();
const versionText = await versionLink.textContent();
console.log(`Version is: ${versionText}`);
const newPagePromise = context.waitForEvent('page');
await versionLink.click();
const newPage = await newPagePromise;
await newPage.waitForLoadState();
const expectedUrl = `https://github.com/JetBrains/kotlin/releases/tag/${versionText!.trim()}`;
await expect(newPage.url()).toContain(expectedUrl);
});

test('Solutions button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const solutionsButton = navbar.getByText('Solutions');
await expect(solutionsButton).toBeVisible();
});

test('Docs button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const docsButton = navbar.getByText('Docs');
await expect(docsButton).toBeVisible();
});

test('API button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const teachButton = navbar.getByText('API').first();
await expect(teachButton).toBeVisible();
});

test('Community button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const communityButton = navbar.getByText('Community');
await expect(communityButton).toBeVisible();
});

test('Teach button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const teachButton = navbar.getByText('Teach');
await expect(teachButton).toBeVisible();
});

test('Play button is visible in navbar', async ({ page }) => {
const navbar = page.locator('[data-test="header"]');
const playButton = navbar.getByText('Play').first();
await expect(playButton).toBeVisible();
});

test('Search button is visible in navbar', async ({ page }) => {
const searchButton = page.locator('[data-test="header-search-button"]');
await expect(searchButton).toBeVisible();
});
});