Building Skills from Scratch | Bondar Academy

Lesson Summary

This lesson focuses on creating skills for the Playwright testing framework, particularly how to refactor tests that use ugly CSS and XPath selectors into more readable and maintainable user-visible selectors. Key Concepts Skill Creation: Skills can be created by briefing an agent with specific tasks, rather than writing extensive instructions manually. Refactoring Locators: The goal is to replace non-recommended locators with user-visible locators such as getByRole , getByLabel , or getByPlaceholder . Manual Approach: Understand the existing locators and their context in the DOM to identify better alternatives. Workflow for Creating Skills Define the task and desired outcome clearly. Identify existing locators and assess their readability. Determine if user-visible locators can be used; if not, create data-test-id attributes. Brief the agent on the workflow and rules for the skill. Test and validate the skill after creation to ensure it performs as expected. Best Practices Always aim for user-visible locators; use CSS selectors only as a last resort. Maintain a clear naming convention for locators. Document any exceptions or special cases in the skill for future reference. By following these steps, you can automate repetitive tasks and improve the maintainability of your Playwright tests. Remember to iterate on your skills and collaborate with your team for better practices.