-
Notifications
You must be signed in to change notification settings - Fork 0
feat: Add generated test case #21
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
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,53 @@ | ||||||
```javascript | ||||||
import { test, expect } from '@playwright/test'; | ||||||
import path from 'path'; | ||||||
|
||||||
// This test assumes the test file is in a directory parallel to the 'source code' directory. | ||||||
// e.g., /project/tests/contact-form.spec.js and /project/source code/webdev.html | ||||||
const webdevPage = `file://${path.resolve(__dirname, '..', 'source code', 'webdev.html')}`; | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add missing semicolon. Line 7 is missing a semicolon at the end of the statement, which violates JavaScript best practices and is flagged by the linter. Apply this diff: -const webdevPage = `file://${path.resolve(__dirname, '..', 'source code', 'webdev.html')}`
+const webdevPage = `file://${path.resolve(__dirname, '..', 'source code', 'webdev.html')}`; Based on static analysis hints. 📝 Committable suggestion
Suggested change
🧰 Tools🪛 Biome (2.1.2)[error] 7-7: Expected a semicolon or an implicit semicolon after a statement, but found none An explicit or implicit semicolon is expected here... ...Which is required to end this statement (parse) 🤖 Prompt for AI Agents
|
||||||
|
||||||
test.describe('Contact Form Validation on webdev.html', () => { | ||||||
test.beforeEach(async ({ page }) => { | ||||||
// Navigate to the local HTML file before each test | ||||||
await page.goto(webdevPage); | ||||||
}); | ||||||
|
||||||
test('should prevent submission and show validation warnings for empty required fields', async ({ page }) => { | ||||||
// Locate the form elements | ||||||
const nameInput = page.locator('#name'); | ||||||
const emailInput = page.locator('#email'); | ||||||
const messageInput = page.locator('#message'); | ||||||
const submitButton = page.getByRole('button', { name: 'Send Message' }); | ||||||
|
||||||
// Ensure the URL is the initial one before the click | ||||||
const initialUrl = page.url(); | ||||||
|
||||||
// Click the submit button without filling out any fields | ||||||
await submitButton.click(); | ||||||
|
||||||
// Verify that the form submission was prevented (i.e., no navigation occurred) | ||||||
expect(page.url()).toBe(initialUrl); | ||||||
|
||||||
// Check the HTML5 validation state for each required field. | ||||||
// We check the `valueMissing` property of the ValidityState API. | ||||||
const isNameInvalid = await nameInput.evaluate(el => (el as HTMLInputElement).validity.valueMissing); | ||||||
const isEmailInvalid = await emailInput.evaluate(el => (el as HTMLInputElement).validity.valueMissing); | ||||||
const isMessageInvalid = await messageInput.evaluate(el => (el as HTMLTextAreaElement).validity.valueMissing); | ||||||
Comment on lines
+33
to
+35
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remove TypeScript syntax from JavaScript file. The file uses TypeScript Solution 1 (recommended): Remove type assertions for JavaScript compatibility: - const isNameInvalid = await nameInput.evaluate(el => (el as HTMLInputElement).validity.valueMissing);
- const isEmailInvalid = await emailInput.evaluate(el => (el as HTMLInputElement).validity.valueMissing);
- const isMessageInvalid = await messageInput.evaluate(el => (el as HTMLTextAreaElement).validity.valueMissing);
+ const isNameInvalid = await nameInput.evaluate(el => el.validity.valueMissing);
+ const isEmailInvalid = await emailInput.evaluate(el => el.validity.valueMissing);
+ const isMessageInvalid = await messageInput.evaluate(el => el.validity.valueMissing); - const nameValidationMessage = await nameInput.evaluate(el => (el as HTMLInputElement).validationMessage);
- const emailValidationMessage = await emailInput.evaluate(el => (el as HTMLInputElement).validationMessage);
- const messageValidationMessage = await messageInput.evaluate(el => (el as HTMLTextAreaElement).validationMessage);
+ const nameValidationMessage = await nameInput.evaluate(el => el.validationMessage);
+ const emailValidationMessage = await emailInput.evaluate(el => el.validationMessage);
+ const messageValidationMessage = await messageInput.evaluate(el => el.validationMessage); Solution 2: Rename to TypeScript: Rename Based on static analysis hints. Also applies to: 44-46 🧰 Tools🪛 Biome (2.1.2)[error] 33-33: 'as' expression are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax. TypeScript only syntax (parse) [error] 34-34: 'as' expression are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax. TypeScript only syntax (parse) [error] 35-35: 'as' expression are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax. TypeScript only syntax (parse) 🤖 Prompt for AI Agents
|
||||||
|
||||||
// Assert that each field is correctly identified as invalid because its value is missing. | ||||||
expect(isNameInvalid, 'The "Name" input should be invalid when empty.').toBe(true); | ||||||
expect(isEmailInvalid, 'The "Email" input should be invalid when empty.').toBe(true); | ||||||
expect(isMessageInvalid, 'The "Message" textarea should be invalid when empty.').toBe(true); | ||||||
|
||||||
// Check that a validation message has been set by the browser. | ||||||
// The exact text can vary between browsers, so we just check that it's not empty. | ||||||
const nameValidationMessage = await nameInput.evaluate(el => (el as HTMLInputElement).validationMessage); | ||||||
const emailValidationMessage = await emailInput.evaluate(el => (el as HTMLInputElement).validationMessage); | ||||||
const messageValidationMessage = await messageInput.evaluate(el => (el as HTMLTextAreaElement).validationMessage); | ||||||
|
||||||
expect(nameValidationMessage).not.toBe(''); | ||||||
expect(emailValidationMessage).not.toBe(''); | ||||||
expect(messageValidationMessage).not.toBe(''); | ||||||
}); | ||||||
}); | ||||||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove markdown code fences - file is invalid JavaScript.
The file is wrapped in markdown code block syntax (triple backticks with
javascript
identifier). This makes the entire file unparseable as JavaScript and will cause runtime failures.Remove the markdown wrapper:
Also applies to: 53-53
🤖 Prompt for AI Agents