feature: add solution on daily 11/13 KT #279
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughA new Playwright test case for a Pikachu game has been added to the Changes
Sequence DiagramsequenceDiagram
participant Test as Playwright Test
participant Game as Pikachu Game
participant Dialog as Win Dialog
Test->>Game: Navigate to Game URL
Test->>Game: Enter Player Name
Test->>Game: Click Start Button
loop Match Pikachu Pairs
Test->>Game: Click First Pikachu
Test->>Game: Click Matching Pikachu
Game-->>Dialog: Trigger Win Dialog
end
Test->>Dialog: Accept Win Dialog
Possibly related PRs
Suggested reviewers
Poem
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Comment on lines
+4
to
+7
| test('pikachu', async ({page}) => { | ||
| await page.goto('https://material.playwrightvn.com/games/002-pikachu.html'); | ||
| await page.fill(`//input[@id='playerName']`,`khanh5923_13`); | ||
| await page.click(`//button[@onclick='startGame()']`); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve test maintainability and reliability
- Move configuration to test fixtures or environment variables:
const TEST_CONFIG = {
gameUrl: 'https://material.playwrightvn.com/games/002-pikachu.html',
playerName: 'khanh5923_13'
};- Replace XPath selectors with more maintainable data-testid or CSS selectors:
-await page.fill(`//input[@id='playerName']`,`khanh5923_13`);
-await page.click(`//button[@onclick='startGame()']`);
+await page.fill('#playerName', TEST_CONFIG.playerName);
+await page.getByRole('button', { name: 'Start Game' }).click();
Comment on lines
+8
to
+12
| const maxNumberOfPikachu = await page.locator(`//div[@id='grid']//div[@class="outer"]`).count(); | ||
| page.on('dialog', async (dialog) => { | ||
| expect(dialog.message()).toBe('Bạn đã thắng cuộc!'); | ||
| await dialog.accept(); | ||
| }) |
There was a problem hiding this comment.
Add proper game initialization checks and error handling
- Move dialog handler setup before game start to catch all possible dialogs
- Add error handling for unexpected dialogs
- Verify game grid is properly loaded
// Add before game start
await page.waitForSelector('#grid', { state: 'visible' });
page.on('dialog', async (dialog) => {
const message = dialog.message();
if (message === 'Bạn đã thắng cuộc!') {
await dialog.accept();
} else {
console.warn(`Unexpected dialog: ${message}`);
await dialog.dismiss();
}
});
Comment on lines
+13
to
+19
| for (let i = 1; i <= maxNumberOfPikachu/2; i++) { | ||
| const firstPikachu = page.locator(`//div[@id='grid']//div[@class="outer"][1]`); | ||
| const textPikachuSelected = await firstPikachu.textContent(); | ||
| await firstPikachu.click(); | ||
| await page.click(`//div[@id='grid']//div[@class="outer" and text()='${textPikachuSelected}']`); | ||
| await page.waitForTimeout(1000); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve game interaction reliability
The current implementation has several potential issues:
- Always clicking the first element might not work if matches are removed
- Hardcoded waits can cause test flakiness
- No verification that matches were successful
Consider this more robust approach:
async function findAndClickMatch(page: Page) {
const grid = page.locator('#grid');
const elements = await grid.locator('.outer').all();
for (const element of elements) {
if (await element.isVisible()) {
const text = await element.textContent();
await element.click();
// Wait for highlight animation
await page.waitForTimeout(100);
// Find and click matching element
const matches = await grid.locator(`.outer:visible:text("${text}")`).all();
if (matches.length > 1) {
await matches[1].click();
// Wait for match animation to complete
await page.waitForResponse(response =>
response.url().includes('match-success')
);
}
break;
}
}
}
// In the test
while (await page.locator('.outer:visible').count() > 0) {
await findAndClickMatch(page);
}
Comment on lines
+4
to
+20
| test('pikachu', async ({page}) => { | ||
| await page.goto('https://material.playwrightvn.com/games/002-pikachu.html'); | ||
| await page.fill(`//input[@id='playerName']`,`khanh5923_13`); | ||
| await page.click(`//button[@onclick='startGame()']`); | ||
| const maxNumberOfPikachu = await page.locator(`//div[@id='grid']//div[@class="outer"]`).count(); | ||
| page.on('dialog', async (dialog) => { | ||
| expect(dialog.message()).toBe('Bạn đã thắng cuộc!'); | ||
| await dialog.accept(); | ||
| }) | ||
| for (let i = 1; i <= maxNumberOfPikachu/2; i++) { | ||
| const firstPikachu = page.locator(`//div[@id='grid']//div[@class="outer"][1]`); | ||
| const textPikachuSelected = await firstPikachu.textContent(); | ||
| await firstPikachu.click(); | ||
| await page.click(`//div[@id='grid']//div[@class="outer" and text()='${textPikachuSelected}']`); | ||
| await page.waitForTimeout(1000); | ||
| } | ||
| }); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Add test robustness improvements
Consider adding these test best practices:
- Add retry logic for flaky operations
- Capture screenshots on failure
- Add proper test cleanup
test('pikachu', async ({ page }) => {
test.info().annotations.push({
type: 'test',
description: 'Verify Pikachu game completion'
});
try {
// ... existing test code ...
} catch (error) {
await page.screenshot({ path: 'pikachu-game-error.png' });
throw error;
} finally {
// Cleanup: Close any open dialogs, reset game state
await page.evaluate(() => window.localStorage.clear());
}
});
Comment on lines
+1
to
+3
| import {test, expect} from '@playwright/test'; | ||
|
|
||
| test.setTimeout(60000); |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Consider optimizing test configuration
- The 60-second timeout might be excessive for this test. Consider reducing it to a more reasonable duration (e.g., 30 seconds) and using explicit waits where needed.
- Add TypeScript types for better code completion and type safety:
-import {test, expect} from '@playwright/test';
+import type { Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import {test, expect} from '@playwright/test'; | |
| test.setTimeout(60000); | |
| import type { Page } from '@playwright/test'; | |
| import { test, expect } from '@playwright/test'; | |
| test.setTimeout(60000); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi anh/ chị, mọi người xem giúp em bài này với ạ.
Summary by CodeRabbit