#playwright #playwrightautomation
#typescript #javascript #with #locator #selector #xpath #cssselector #id #tutorial #automation #testing #coding #selenium #cypress
playwright, playwright tutorial, playwright testing, playwright locator, playwright selector,
===============================================================================
Chapters
00:00 - Introduction of locator Method
1:12 - Different Type of Selector in locator method
1:26 - Use of "Xpath" in Playwright locator Method
16:10 - Use of "CSS Selector" in Playwright locator Method
30:04 - Use of "Text" in Playwright locator Method
37:12 - Use of "id / data-test / data-test-id" in Playwright locator Method
44:12 - Recommendation and Bad-Practices on locators from Playwright
47:17 - Recap
===============================================================================
Playwright With TypeScript Series - [ Ссылка ]?
Playwright Notes - [ Ссылка ]
list=PL83cimSRP5ZmwhC6u255huRwSi9tlP-nc&si=e8WYr77xmtHKvGcr
SauceDemo Practice Site - [ Ссылка ]
Playwright Documentation - [ Ссылка ]
===============================================================================
Video 6 - Playwright (TypeScript) - Locator Method using Selectors (Xpath, CSS Selector, Text, Id)
Locators
locators represent a way to find element(s) on the page at any moment.
locator can be created with the page.locator() method.
Locator Method
The method returns an element locator that can be used to perform actions on page / frame.
Locator Method Usage
page.locator(selector);
page.locator(selector, options);
Different Types of Selector
Xpath - XPath is a technique to navigate through a page’s HTML structure.
1 - //htmltag[@attribute=’attributeValue’]
2 - //*[@attribute=’attributeValue’]
Css Selectors - CSS Selectors are string patterns used to identify an element based on a
combination of HTML tag, id, class, and attributes.
1 - htmltag.classvalue / .classvalue
2 - htmltaghassymbolidValue / hassymbolidValue
3 - htmltag[attributeName=attributeValue] / [attributeName=attributeValue]
Text
1 - text=’textValue’ - Cases Sensitive Text
2 - test=textValue - Non Case Sensitive text
id, data-testid, data-test-id, data-test, ………………….. and So on.
1 - id/data-test-id/data-test=value
