Open the Banking Portal login page (/banking/login) in your browser. Open DevTools (F12). For each element below, write both a CSS selector and an XPath expression. Test each one in the DevTools Console before writing code.
// 1. Page heading
By.cssSelector("h2");
By.xpath("//h2[text()='Sign In to Your Account']");
// 2. User ID input
By.cssSelector("[data-testid='userId']");
By.xpath("//input[@id='userId']");
// 3. Password input
By.cssSelector("[data-testid='password']");
By.xpath("//input[@name='password']");
// 4. Remember checkbox
By.cssSelector("[data-testid='rememberMe']");
By.xpath("//input[@data-testid='rememberMe']");
// 5. Forgot Password link
By.linkText("Forgot Password?");
By.xpath("//a[contains(text(), 'Forgot Password')]");
// 6. Sign In button
By.cssSelector("[data-testid='loginBtn']");
By.xpath("//button[text()='Sign In']");
// 7. OTP button
By.cssSelector("[data-testid='otpLoginBtn']");
By.xpath("//button[contains(text(), 'OTP')]");
// 8. Register link
By.cssSelector("[data-testid='registerLink']");
By.xpath("//a[text()='Register Now']");
// 9. Demo credentials
By.xpath("//strong[text()='rahul@netbank.com']");
By.xpath("//p[contains(text(), 'Demo')]");
// 10. Security footer
By.xpath("//p[contains(text(), 'secure')]");Key Point: Practice writing both CSS and XPath for the same element. Know when to use which.