{"id":1245,"date":"2026-10-14T06:56:05","date_gmt":"2026-10-14T06:56:05","guid":{"rendered":"https:\/\/logicnextgen.com\/tutorials\/?page_id=1245"},"modified":"2026-10-15T10:39:21","modified_gmt":"2026-10-15T10:39:21","slug":"playwright-typescript-javascript-interview-questions-and-answers","status":"publish","type":"page","link":"https:\/\/logicnextgen.com\/tutorials\/playwright-typescript-javascript-interview-questions-and-answers\/","title":{"rendered":"Playwright TypeScript JavaScript Interview Questions and Answers"},"content":{"rendered":"\n<p class=\"has-text-color has-link-color has-x-large-font-size wp-elements-1 wp-block-paragraph\" style=\"color:#ff8d00\"><strong>Top Playwright TypeScript\/JavaScript Interview Questions &amp; Answers<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-2\" style=\"color:#ff8d00\"><strong>1. What is TypeScript?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript is a programming language built on JavaScript. It helps you find errors early and makes your code easier to write, understand, and maintain.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/In JavaScript:\n\nlet age = 25;\n\nage = \"Twenty Five\"; \/\/ Allowed\n\nJavaScript allows age to change from a number to a string.<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/In JavaScript:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">let<\/span><span style=\"color: #F8F8F2\"> age <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">25<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">age <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Twenty Five<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #6272A4\">\/\/ Allowed<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">JavaScript allows age to change from a number to a string.<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/But In TypeScript:\n\nlet age: number = 25;\n\nage = \"Twenty Five\"; \/\/ Error\n\nHere, age: number means age can contain only numbers. \nTypeScript will show an error if you try to assign text to it.<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/But In TypeScript:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">let<\/span><span style=\"color: #F8F8F2\"> age<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">25<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">age <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Twenty Five<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #6272A4\">\/\/ Error<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">Here, age: number means age can contain only numbers. <\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">TypeScript will show an error <\/span><span style=\"color: #FF79C6\">if<\/span><span style=\"color: #F8F8F2\"> you <\/span><span style=\"color: #FF79C6\">try<\/span><span style=\"color: #F8F8F2\"> to assign text to it.<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In simple words:<br>TypeScript = JavaScript + Type Safety<br>It helps find coding mistakes early and makes code easier to maintain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-3\" style=\"color:#ff8d00\"><strong>2. Why do we use TypeScript in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript is useful with Playwright because it makes your automation code <strong>safer, easier to write, and easier to maintain<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Main benefits:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Safer functions and test data<\/strong><br>You can define exactly what type of data a function should accept.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Catches mistakes early<\/strong><br>TypeScript can identify type-related errors before you run your tests.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Better code suggestions<\/strong><br>Editors like VS Code can provide better autocomplete for Playwright methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Easy to maintain<\/strong><br> Larger Page Object Model (POM) frameworks easier to understand and modify.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-4\" style=\"color:#ff8d00\"><strong>3. What is the difference between let, const, and var?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">All three are used to <strong>create variables<\/strong>, but they behave differently.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <code>let<\/code> &#8211; value can change<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>let<\/code> when you know the value may change.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>let score = 10;\nscore = 20;\n\nconsole.log(score); \/\/ 20<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">let<\/span><span style=\"color: #F8F8F2\"> score <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">10<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">score <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">20<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(score); <\/span><span style=\"color: #6272A4\">\/\/ 20<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Easy meaning:<\/strong> <code>let<\/code> = <strong>I may change this value later.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. <code>const<\/code> &#8211; value cannot be reassigned<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>const<\/code> when you don&#8217;t want to assign a different value later.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>const browser = \"Chrome\";\n\nbrowser = \"Firefox\"; \/\/Error<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> browser <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Chrome<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">browser <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Firefox<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #6272A4\">\/\/Error<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Easy meaning:<\/strong> <code>const<\/code> = <strong>Keep this value fixed.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. <code>var<\/code> &#8211; old way of declaring variables.<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>var name = \"Keshav\";\nname = \"Rahul\"; \/\/ Allowed\n\nvar name = \"Kapoor\"; \/\/ Also allowed<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">var<\/span><span style=\"color: #F8F8F2\"> name <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Keshav<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">name <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Rahul<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #6272A4\">\/\/ Allowed<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">var<\/span><span style=\"color: #F8F8F2\"> name <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Kapoor<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">; <\/span><span style=\"color: #6272A4\">\/\/ Also allowed<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>var<\/code> behaves differently from <code>let<\/code> and <code>const<\/code>, particularly regarding scope and redeclaration, so modern TypeScript code generally prefers <code>let<\/code> and <code>const<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Keyword<\/th><th>Can change value?<\/th><th>Can declare again?<\/th><th>Recommended?<\/th><\/tr><\/thead><tbody><tr><td><code>let<\/code><\/td><td>Yes<\/td><td>No<\/td><td>Yes<\/td><\/tr><tr><td><code>const<\/code><\/td><td>No<\/td><td>No<\/td><td>Yes<\/td><\/tr><tr><td><code>var<\/code><\/td><td>Yes<\/td><td>Yes<\/td><td>Usually avoid<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>let<\/code> and <code>const<\/code> are block-scoped, while <code>var<\/code> is function-scoped. <code>const<\/code> cannot be reassigned after initialization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-5\" style=\"color:#ff8d00\"><strong>4. What is an Interface?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An <strong>interface is like a rule or structure<\/strong> that tells TypeScript what properties an object should have and what type of data those properties can contain.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Interface = Blueprint \/ Rules for an object<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-6\" style=\"color:#ff8d00\"><strong>5. What are Modules in TypeScript?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Modules allow us to divide code into separate files and share functionality using <code>export<\/code> and <code>import<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-7\" style=\"color:#ff8d00\"><strong>6. What is any in TypeScript?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>any<\/code> disables type checking for a variable. It allows assigning any type of value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-8\" style=\"color:#ff8d00\"><strong>7. What is a return value?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A return value is the result that a function sends back.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>function add(a: number, b: number): number {\n    return a + b;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">function<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">add<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FFB86C; font-style: italic\">a<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FFB86C; font-style: italic\">b<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\">)<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">number<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #FF79C6\">return<\/span><span style=\"color: #F8F8F2\"> a <\/span><span style=\"color: #FF79C6\">+<\/span><span style=\"color: #F8F8F2\"> b;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-9\" style=\"color:#ff8d00\"><strong>8. <\/strong><strong>What is the difference between <code>==<\/code> and <code>===<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>==<\/code> allows type conversion during comparison.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>===<\/code> checks values without that type coercion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-10\" style=\"color:#ff8d00\"><strong>9. What is <code>forEach()<\/code><\/strong>?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>forEach()<\/code> executes a function for every element in an array.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>let browsers = &#91;\"Chrome\", \"Firefox\", \"Edge\"&#93;;\n\nbrowsers.forEach(browser => {\n    console.log(browser);\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">let<\/span><span style=\"color: #F8F8F2\"> browsers <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> &#91;<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Chrome<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Firefox<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Edge<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&#93;;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">browsers.<\/span><span style=\"color: #50FA7B\">forEach<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #FFB86C; font-style: italic\">browser<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(browser);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">An enum is a collection of named constants. It improves readability and avoids hardcoded values.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-11\" style=\"color:#ff8d00\"><strong>10. What is <code>length<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>length<\/code> tells us how many elements are in an array or characters are in a string.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>let browsers = &#91;\"Chrome\", \"Firefox\", \"Edge\"&#93;;\n\nconsole.log(browsers.length); \/\/ 3<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">let<\/span><span style=\"color: #F8F8F2\"> browsers <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> &#91;<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Chrome<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Firefox<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Edge<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">&#93;;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(browsers.length); <\/span><span style=\"color: #6272A4\">\/\/ 3<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-12\" style=\"color:#ff8d00\"><strong>11. What is a Class?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A class is a blueprint for creating objects. It contains properties and methods.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-13\" style=\"color:#ff8d00\"><strong>12. What is Inheritance?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inheritance allows a child class to acquire properties and methods from a parent class. It promotes code reusability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-14\" style=\"color:#ff8d00\"><strong>13. What is Encapsulation?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Encapsulation means keeping data and the methods that work with that data together inside a class, while controlling access where needed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-15\" style=\"color:#ff8d00\"><strong>14. What are Access Modifiers?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Access modifiers control member visibility in a class. The three types are <code>public<\/code>, <code>private<\/code>, and <code>protected<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-16\" style=\"color:#ff8d00\"><strong>15. What is an Abstract Class?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An abstract class cannot be instantiated directly. It serves as a base class for other classes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-17\" style=\"color:#ff8d00\"><strong>16. What is Method Overloading?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Method overloading allows multiple method signatures with a single implementation. It improves flexibility in method usage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-18\" style=\"color:#ff8d00\"><strong>17. What is <code>extends<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>extends<\/code> is used when one class inherits from another class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-19\" style=\"color:#ff8d00\"><strong>18. What is <code>implements<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Implements<\/code> is used when a class follows the structure defined by an interface.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>interface User {\n    login(): void;\n}\n\nclass Admin implements User {\n    login(): void {\n        console.log(\"Login\");\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">interface<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">User<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">login<\/span><span style=\"color: #F8F8F2\">()<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">void<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">class<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD\">Admin<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">implements<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">User<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">login<\/span><span style=\"color: #F8F8F2\">()<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD; font-style: italic\">void<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Login<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-20\" style=\"color:#ff8d00\"><strong>19. What is an Object?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">An object is an <strong>instance of a class<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">const user = new User();<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-21\" style=\"color:#ff8d00\"><strong>20. What is a Constructor?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A constructor is a special method that runs when an object is created. It is commonly used to initialize properties.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-22\" style=\"color:#ff8d00\"><strong>21. What is <code>this<\/code> keyword?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>This<\/code> refers to the <strong>current object<\/strong> of the class.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>class User {\n    name = \"Keshav\";\n\n    display() {\n        console.log(this.name);\n    }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">class<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD\">User<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    name <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F1FA8C\">Keshav<\/span><span style=\"color: #E9F284\">&quot;<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    <\/span><span style=\"color: #50FA7B\">display<\/span><span style=\"color: #F8F8F2\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9; font-style: italic\">this<\/span><span style=\"color: #F8F8F2\">.name);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-23\" style=\"color:#ff8d00\"><strong>22. Why do we use Inheritance?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Inheritance helps <strong>reuse common code<\/strong> and reduce duplication.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-24\" style=\"color:#ff8d00\"><strong>23. What are Optional Parameters?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Optional parameters are not mandatory during function calls. They are marked using the <code>?<\/code> symbol.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-25\" style=\"color:#ff8d00\"><strong>24. What is Polymorphism?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Polymorphism means the <strong>same method\/interface can have different behavior depending on the object<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-26\" style=\"color:#ff8d00\"><strong>25. What is Method Overriding?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Method overriding happens when a child class provides its own implementation of a method inherited from its parent.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-27\" style=\"color:#ff8d00\"><strong>26. What is Playwright?<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright is an open-source automation framework developed by Microsoft for web application testing. It supports Chromium, Firefox, and WebKit browsers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-28\" style=\"color:#ff8d00\"><strong>27. What are the advantages of Playwright over Selenium?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright provides auto-waiting, faster execution, built-in parallel execution, and supports multiple browser engines. It also handles modern web applications more effectively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-29\" style=\"color:#ff8d00\"><strong>28. Which browsers are supported by Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright supports Chromium, Firefox, and WebKit. It can also automate Google Chrome and Microsoft Edge.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-30\" style=\"color:#ff8d00\"><strong>29. What is Browser Context in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A Browser Context is an isolated browser session. Multiple contexts can run within a single browser instance without sharing cookies or storage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-31\" style=\"color:#ff8d00\"><strong>30. Difference between Browser and Browser Context?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A Browser is the actual browser instance, while a Browser Context is an independent session within that browser. Contexts help run parallel and isolated tests.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-32\" style=\"color:#ff8d00\"><strong><strong>32.<\/strong><\/strong> <strong>What is Page Object Model (POM)?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">POM is a design pattern where page elements and actions are stored in separate classes. It improves maintainability and code reusability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-33\" style=\"color:#ff8d00\"><strong>33. What are Locators in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Locators are used to identify web elements on a page. They provide auto-waiting and retry mechanisms before performing actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-34\" style=\"color:#ff8d00\"><strong>34. Which locator is recommended in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>getByRole()<\/code> is the most recommended locator because it mimics how users interact with the application. It is stable and accessible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-35\" style=\"color:#ff8d00\"><strong>35. What is Auto-Wait in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright automatically waits for elements to become visible, enabled, and actionable before performing operations. This reduces flaky tests.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-36\" style=\"color:#ff8d00\"><strong>36. Difference between <code>locator()<\/code> and <code>page.$()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>locator()<\/code> supports auto-waiting and retries. <code>page.$()<\/code> returns the element immediately and may fail if the element is not available.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-37\" style=\"color:#ff8d00\"><strong>37. What is <code>test.describe()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>test.describe()<\/code> is used to group related test cases together. It improves test organization and readability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-38\" style=\"color:#ff8d00\"><strong>38. What is <code>test.beforeEach()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This hook runs before every test case in a test suite. It is commonly used for login and setup operations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-39\" style=\"color:#ff8d00\"><strong>39. What is <code>test.afterEach()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This hook runs after every test case execution. It is used for cleanup activities and logging.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-40\" style=\"color:#ff8d00\"><strong>40. What is the difference between <code>beforeAll<\/code> and <code>beforeEach<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>beforeAll<\/code> executes once before all tests. <code>beforeEach<\/code> executes before every individual test.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-41\" style=\"color:#ff8d00\"><strong>41. How do you perform assertions in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright uses the <code>expect()<\/code> library for assertions. It verifies text, visibility, URL, title, and other conditions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-42\" style=\"color:#ff8d00\"><strong>42. How do you handle dropdowns?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>selectOption()<\/code> to select dropdown values. Values can be selected by label, value, or index.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-43\" style=\"color:#ff8d00\"><strong>43. How do you handle alerts?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright handles alerts using the <code>dialog<\/code> event. You can accept or dismiss the alert through event handlers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-44\" style=\"color:#ff8d00\"><strong>45. How do you upload files in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">File upload is handled using <code>setInputFiles()<\/code>. It directly uploads files without opening the OS file picker.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-45\" style=\"color:#ff8d00\"><strong>46. How do you handle multiple tabs?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the browser context&#8217;s <code>waitForEvent('page')<\/code> method. It captures and switches control to the new tab.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-46\" style=\"color:#ff8d00\"><strong>47. How do you take screenshots in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use the <code>page.screenshot()<\/code> method. Screenshots can be taken for the full page or a specific element.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-47\" style=\"color:#ff8d00\"><strong>48. How do you capture network requests?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Use <code>page.on('request')<\/code> and <code>page.on('response')<\/code> events. They allow monitoring of API and network traffic.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-48\" style=\"color:#ff8d00\"><strong>49. What is API Testing in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright provides APIRequestContext for REST API testing. It allows GET, POST, PUT, and DELETE operations without a browser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-49\" style=\"color:#ff8d00\"><strong>49. How do you run tests in parallel?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Set the <code>workers<\/code> property in <code>playwright.config.ts<\/code>. Playwright automatically distributes tests across workers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-50\" style=\"color:#ff8d00\"><strong>50. What is Playwright Trace Viewer?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Trace Viewer is a debugging tool that records test execution details, screenshots, network calls, and actions. It helps analyze test failures.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-51\" style=\"color:#ff8d00\"><strong>51. How do you generate an HTML report?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Execute the tests using the HTML reporter configuration. After execution, open the report with <code>npx playwright show-report<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-52\" style=\"color:#ff8d00\"><strong>52. How do you handle frames in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright uses <code>frameLocator()<\/code> to work with elements inside an iframe. It provides direct access to frame content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-53\" style=\"color:#ff8d00\"><strong>53. How do you handle authentication in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Authentication state can be saved using <code>storageState()<\/code>. This avoids logging in before every test execution.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-54\" style=\"color:#ff8d00\"><strong>54. What is Fixture in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Fixtures provide reusable setup and teardown logic for tests. They help reduce code duplication and improve maintainability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-55\" style=\"color:#ff8d00\"><strong>55. What are Hooks in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hooks are methods such as <code>beforeAll<\/code>, <code>beforeEach<\/code>, <code>afterEach<\/code>, and <code>afterAll<\/code>. They manage preconditions and cleanup activities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-56\" style=\"color:#ff8d00\"><strong>56. Why should companies choose Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright offers cross-browser support, faster execution, auto-waiting, API testing, tracing, and parallel execution. These features make automation reliable and scalable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-57\" style=\"color:#ff8d00\"><strong>57. How do you run only failed tests from the last run?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">npx playwright test &#8211;last-failed<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-58\" style=\"color:#ff8d00\"><strong>58. What is <code>test.skip()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Skips execution of a particular test.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-59\" style=\"color:#ff8d00\"><strong>59. What is <code>test.only()<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Runs only the specified test.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>test.only('Login Test', async () => {\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">test.<\/span><span style=\"color: #50FA7B\">only<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Login Test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> () <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-60\" style=\"color:#ff8d00\"><br><strong>60. How do you run Playwright tests on multiple browsers?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright supports <strong>cross-browser testing<\/strong>, which means the same test can run on <strong>Chromium, Firefox, and WebKit<\/strong> without changing the test code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You configure multiple browsers using the <strong>projects<\/strong> section in <code>playwright.config.ts<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">projects: [<br>{ name: &#8216;chromium&#8217; },<br>{ name: &#8216;firefox&#8217; },<br>{ name: &#8216;webkit&#8217; }<br>]<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-61\" style=\"color:#ff8d00\"><br><strong>61. What is the <code>readonly<\/code> keyword?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>readonly<\/code> prevents a property from being modified after initialization.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>class User {\n  readonly id = 101;\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">class<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #8BE9FD\">User<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #FF79C6\">readonly<\/span><span style=\"color: #F8F8F2\"> id <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">101<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-62\" style=\"color:#ff8d00\"><strong>62. Difference between Overloading and Overriding?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Overloading:<\/strong> Same method\/function name with different call signatures.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Overriding:<\/strong> Child class replaces an inherited method&#8217;s behavior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-63\" style=\"color:#ff8d00\"><strong>63. What is Abstraction?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Abstraction means exposing necessary behavior while hiding implementation details.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-64\" style=\"color:#ff8d00\"><strong>64. Can we create an object of an Abstract Class?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">No. An abstract class cannot be instantiated directly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-65\" style=\"color:#ff8d00\"><strong>65. Can an Abstract Class have normal methods?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. An abstract class can contain both abstract and implemented methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-66\" style=\"color:#ff8d00\"><strong>66. Can a class implement multiple interfaces?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-67\" style=\"color:#ff8d00\"><strong>67. Can an Interface extend another Interface?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-68\" style=\"color:#ff8d00\"><strong>68. What is a Static Method?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A static method is called using the class itself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-69\" style=\"color:#ff8d00\"><strong>69. <\/strong>Can a Child Class have its own methods?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. A child class can inherit methods and also define additional methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-70\" style=\"color:#ff8d00\"><strong>70. What is <code>super<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>super<\/code> is used in a child class to access the parent class constructor or methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-71\" style=\"color:#ff8d00\"><strong>71. How would you use Inheritance in an automation framework?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Common methods can be stored in a base class and inherited by page classes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-72\" style=\"color:#ff8d00\"><strong>72. How would you use Encapsulation in automation?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can keep internal page details private and expose only the operations a test needs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-73\" style=\"color:#ff8d00\"><strong>73. <strong>What is an Assertion?<\/strong><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Assertions validate whether an expected result matches the actual result.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They confirm that the application behaves correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assertions can validate:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Error messages<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Page titles<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">URLs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Success messages<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-74\" style=\"color:#ff8d00\"><strong>74. How do you run only failed tests from the last run?<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>npx playwright test --last-failed<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-75\" style=\"color:#ff8d00\"><strong>75. What are basic assertions in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>toBeVisible<\/code>, <code>toHaveText<\/code>, <code>toHaveURL<\/code>, <code>toHaveCount<\/code>, <code>toContainText<\/code>, and <code>toBeEnabled<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Check current page URL after login\nawait expect(page).toHaveURL('\/dashboard');\n\n\/\/ Check page title\nawait expect(page).toHaveTitle('My App - Dashboard');\n\n\/\/ Check element is visible on screen\nawait expect(page.locator('.success-msg')).toBeVisible();\n\n\/\/ Check element has specific text\nawait expect(page.locator('h1')).toHaveText('Welcome, Rahul');\n\n\/\/ Check element does NOT exist or is NOT visible\nawait expect(page.locator('.error-msg')).not.toBeVisible();<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check current page URL after login<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page).<\/span><span style=\"color: #50FA7B\">toHaveURL<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">\/dashboard<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check page title<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page).<\/span><span style=\"color: #50FA7B\">toHaveTitle<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">My App - Dashboard<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check element is visible on screen<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.success-msg<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)).<\/span><span style=\"color: #50FA7B\">toBeVisible<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check element has specific text<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">h1<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)).<\/span><span style=\"color: #50FA7B\">toHaveText<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Welcome, Rahul<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check element does NOT exist or is NOT visible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.error-msg<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)).not.<\/span><span style=\"color: #50FA7B\">toBeVisible<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-76\" style=\"color:#ff8d00\"><strong>76. Why should you avoid waitForTimeout?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>page.waitForTimeout(2000)<\/code> pauses for a fixed duration. It is the test-automation equivalent of <code>Thread.sleep<\/code>, and it causes flaky tests for 2 reasons:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-77\" style=\"color:#ff8d00\"><strong>77. <\/strong>How do you configure screenshots, videos, and traces?<\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>export default defineConfig({\n  use: {\n    screenshot: 'only-on-failure', \/\/ 'on' | 'off' | 'only-on-failure'\n    video: 'retain-on-failure',    \/\/ 'on' | 'off' | 'retain-on-failure' | 'on-first-retry'\n    trace: 'on-first-retry',       \/\/ 'on' | 'off' | 'retain-on-failure' | 'on-first-retry'\n  },\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">default<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">defineConfig<\/span><span style=\"color: #F8F8F2\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  use<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    screenshot<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">only-on-failure<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #6272A4\">\/\/ &#39;on&#39; | &#39;off&#39; | &#39;only-on-failure&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    video<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">retain-on-failure<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,    <\/span><span style=\"color: #6272A4\">\/\/ &#39;on&#39; | &#39;off&#39; | &#39;retain-on-failure&#39; | &#39;on-first-retry&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    trace<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">on-first-retry<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,       <\/span><span style=\"color: #6272A4\">\/\/ &#39;on&#39; | &#39;off&#39; | &#39;retain-on-failure&#39; | &#39;on-first-retry&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-78\" style=\"color:#ff8d00\"><strong>78.How do you run only one specific test in Playwright?<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Use test.only() to run just this one test\ntest.only('Login test', async ({ page }) => {\n  \/\/ only this test will run in this file\n});\n\n\/\/ Remember to remove .only before committing to Git!<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Use test.only() to run just this one test<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">test.<\/span><span style=\"color: #50FA7B\">only<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Login test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ only this test will run in this file<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Remember to remove .only before committing to Git!<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-79\" style=\"color:#ff8d00\"><strong>79. How does parallel execution work?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright runs tests in parallel by default. Each <em>worker<\/em> is a separate Node.js process running its own browser. The runner distributes test files across workers.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ playwright.config.ts\nexport default defineConfig({\n  fullyParallel: true,                       \/\/ run tests within a file in parallel too\n  workers: process.env.CI ? 4 : undefined,   \/\/ 4 in CI, half your CPU cores locally\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ playwright.config.ts<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">export<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">default<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">defineConfig<\/span><span style=\"color: #F8F8F2\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  fullyParallel<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">true<\/span><span style=\"color: #F8F8F2\">,                       <\/span><span style=\"color: #6272A4\">\/\/ run tests within a file in parallel too<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  workers<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> process.env.<\/span><span style=\"color: #BD93F9\">CI<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">?<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">4<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">undefined<\/span><span style=\"color: #F8F8F2\">,   <\/span><span style=\"color: #6272A4\">\/\/ 4 in CI, half your CPU cores locally<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-80\" style=\"color:#ff8d00\"><strong>80. What are Locators in Playwright?<\/strong><\/h3>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ By role \u2014 most recommended, works with accessibility\npage.getByRole('button', { name: 'Login' })\npage.getByRole('textbox', { name: 'Email' })\n\n\/\/ By visible text on screen\npage.getByText('Welcome to STAD Solution')\n\n\/\/ By placeholder text inside an input\npage.getByPlaceholder('Enter your email')\n\n\/\/ By label text (for form fields)\npage.getByLabel('Password')\n\n\/\/ By test ID \u2014 most stable for automation\npage.getByTestId('submit-button')\n\n\/\/ By CSS selector\npage.locator('#email-input')\npage.locator('.btn-primary')<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ By role \u2014 most recommended, works with accessibility<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByRole<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">button<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, { name<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Login<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByRole<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">textbox<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, { name<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Email<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ By visible text on screen<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByText<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Welcome to STAD Solution<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ By placeholder text inside an input<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByPlaceholder<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Enter your email<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ By label text (for form fields)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByLabel<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Password<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ By test ID \u2014 most stable for automation<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">getByTestId<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">submit-button<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ By CSS selector<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#email-input<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.btn-primary<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-81\" style=\"color:#ff8d00\"><strong>81. How do you check if an element is visible or exists on the page?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright provides two methods \u2014 <strong>isVisible()<\/strong> returns true or false, while <strong>toBeVisible()<\/strong> is an assertion that fails the test if the element is not visible.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Check visibility \u2014 returns true or false\nconst isVisible = await page.locator('.success-msg').isVisible();\nconsole.log(isVisible); \/\/ true or false\n\n\/\/ Assert element IS visible \u2014 test fails if not\nawait expect(page.locator('.success-msg')).toBeVisible();\n\n\/\/ Assert element is NOT visible\nawait expect(page.locator('.error-msg')).not.toBeVisible();\n\n\/\/ Check if element exists in DOM (even if hidden)\nconst exists = await page.locator('#modal').count() > 0;\nconsole.log(exists); \/\/ true if present in HTML<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check visibility \u2014 returns true or false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> isVisible <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.success-msg<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">isVisible<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(isVisible); <\/span><span style=\"color: #6272A4\">\/\/ true or false<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Assert element IS visible \u2014 test fails if not<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.success-msg<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)).<\/span><span style=\"color: #50FA7B\">toBeVisible<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Assert element is NOT visible<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #50FA7B\">expect<\/span><span style=\"color: #F8F8F2\">(page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.error-msg<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">)).not.<\/span><span style=\"color: #50FA7B\">toBeVisible<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Check if element exists in DOM (even if hidden)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">const<\/span><span style=\"color: #F8F8F2\"> exists <\/span><span style=\"color: #FF79C6\">=<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#modal<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">count<\/span><span style=\"color: #F8F8F2\">() <\/span><span style=\"color: #FF79C6\">&gt;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #BD93F9\">0<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">console.<\/span><span style=\"color: #50FA7B\">log<\/span><span style=\"color: #F8F8F2\">(exists); <\/span><span style=\"color: #6272A4\">\/\/ true if present in HTML<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-82\" style=\"color:#ff8d00\"><strong>82. What is the difference between fill() and type() in Playwright?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-left\" data-align=\"left\">Method<\/th><th class=\"has-text-align-left\" data-align=\"left\">How it works<\/th><th class=\"has-text-align-left\" data-align=\"left\">Speed<\/th><th class=\"has-text-align-left\" data-align=\"left\">Use when<\/th><\/tr><tr><td><strong>fill()<\/strong><\/td><td>Clears the field and sets value directly<\/td><td>Fast<\/td><td>Most form inputs \u2014 standard text, email, password<\/td><\/tr><tr><td><strong>type()<\/strong><\/td><td>Simulates actual key press for each character<\/td><td>Slow<\/td><td>Search inputs with live autocomplete suggestions<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ fill() \u2014 use for most inputs\nawait page.fill('#email', 'kapoor@gmail.com');\n\n\/\/ type() \u2014 use for autocomplete search inputs\n\/\/ Each keypress triggers a suggestion list update\nawait page.locator('#city-search').type('Noida');\nawait page.locator('.suggestion-item').first().click();<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ fill() \u2014 use for most inputs<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">fill<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#email<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">kapoor@gmail.com<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ type() \u2014 use for autocomplete search inputs<\/span><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Each keypress triggers a suggestion list update<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#city-search<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">type<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Noida<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">.suggestion-item<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">first<\/span><span style=\"color: #F8F8F2\">().<\/span><span style=\"color: #50FA7B\">click<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-83\" style=\"color:#ff8d00\"><strong>83. How do you scroll to an element or scroll the page?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright automatically scrolls to elements before clicking them. But sometimes you need to scroll manually \u2014 like to load lazy-loaded content or to scroll inside a specific container.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Scroll a specific element into view\nawait page.locator('#footer-section').scrollIntoViewIfNeeded();\n\n\/\/ Scroll to bottom of page (for lazy loading)\nawait page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));\n\n\/\/ Scroll to top of page\nawait page.evaluate(() => window.scrollTo(0, 0));\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Scroll a specific element into view<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">locator<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">#footer-section<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">scrollIntoViewIfNeeded<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Scroll to bottom of page (for lazy loading)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">evaluate<\/span><span style=\"color: #F8F8F2\">(() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> window.<\/span><span style=\"color: #50FA7B\">scrollTo<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">0<\/span><span style=\"color: #F8F8F2\">, document.body.scrollHeight));<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Scroll to top of page<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">evaluate<\/span><span style=\"color: #F8F8F2\">(() <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> window.<\/span><span style=\"color: #50FA7B\">scrollTo<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #BD93F9\">0<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #BD93F9\">0<\/span><span style=\"color: #F8F8F2\">));<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-84\" style=\"color:#ff8d00\"><strong>84. <\/strong>How do you use tags to run only specific tests?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tags help you organize and selectively run tests. Add tags using <strong>@tag<\/strong> in the test name, then filter by tag from the terminal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Add @tags to test names\ntest('Login test @smoke', async ({ page }) => { });\ntest('Checkout test @smoke @regression', async ({ page }) => { });\ntest('Profile update @regression', async ({ page }) => { });\ntest('Payment @regression @payment', async ({ page }) => { });<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Add @tags to test names<\/span><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Login test @smoke<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> { });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Checkout test @smoke @regression<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> { });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Profile update @regression<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> { });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Payment @regression @payment<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> { });<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly># Run only smoke tests (quick sanity check)\nnpx playwright test --grep @smoke\n\n# Run full regression suite\nnpx playwright test --grep @regression\n\n# Run only payment-related tests\nnpx playwright test --grep @payment\n\n# Skip smoke tests, run everything else\nnpx playwright test --grep-invert @smoke<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\"># Run only smoke <\/span><span style=\"color: #50FA7B\">tests<\/span><span style=\"color: #F8F8F2\"> (quick sanity check)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright test <\/span><span style=\"color: #FF79C6\">--<\/span><span style=\"color: #F8F8F2\">grep @<\/span><span style=\"color: #50FA7B; font-style: italic\">smoke<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\"># Run full regression suite<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright test <\/span><span style=\"color: #FF79C6\">--<\/span><span style=\"color: #F8F8F2\">grep @<\/span><span style=\"color: #50FA7B; font-style: italic\">regression<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\"># Run only payment<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">related tests<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright test <\/span><span style=\"color: #FF79C6\">--<\/span><span style=\"color: #F8F8F2\">grep @<\/span><span style=\"color: #50FA7B; font-style: italic\">payment<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\"># Skip smoke tests, run everything <\/span><span style=\"color: #FF79C6\">else<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright test <\/span><span style=\"color: #FF79C6\">--<\/span><span style=\"color: #F8F8F2\">grep<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">invert @<\/span><span style=\"color: #50FA7B; font-style: italic\">smoke<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-85\" style=\"color:#ff8d00\"><strong>85.What is the Playwright HTML Report and Trace Viewer?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright has two powerful built-in tools for understanding test results:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML Report<\/strong> \u2014 A visual report showing all test results with pass\/fail status, screenshots, error messages, and test duration. You can share this with your team or manager after a test run.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Trace Viewer<\/strong> \u2014 A step-by-step recording of everything that happened during a test \u2014 every click, every network call, every DOM snapshot. When a test fails, you open the trace to see exactly what went wrong.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/playwright.config.js \u2014 Enable trace and report\n\nreporter: &#91;'html'&#93;,  \/\/ generates HTML report\n\nuse: {\n  trace: 'retain-on-failure',       \/\/ save trace only when test fails\n  screenshot: 'only-on-failure',    \/\/ save screenshot on failure\n  video: 'retain-on-failure',        \/\/ save video on failure\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/playwright.config.js \u2014 Enable trace and report<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">reporter: &#91;<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">html<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">&#93;,  <\/span><span style=\"color: #6272A4\">\/\/ generates HTML report<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">use: {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  trace: <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">retain-on-failure<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,       <\/span><span style=\"color: #6272A4\">\/\/ save trace only when test fails<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  screenshot: <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">only-on-failure<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,    <\/span><span style=\"color: #6272A4\">\/\/ save screenshot on failure<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  video: <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">retain-on-failure<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">,        <\/span><span style=\"color: #6272A4\">\/\/ save video on failure<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/Terminal\n\n# Open HTML report in browser\nnpx playwright show-report\n\n# Open trace file to debug a failure\nnpx playwright show-trace trace.zip<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/Terminal<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\"># Open HTML report <\/span><span style=\"color: #FF79C6\">in<\/span><span style=\"color: #F8F8F2\"> browser<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright show<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">report<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\"># Open trace file to debug a failure<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">npx playwright show<\/span><span style=\"color: #FF79C6\">-<\/span><span style=\"color: #F8F8F2\">trace trace.zip<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-86\" style=\"color:#ff8d00\"><strong>86. What are test.skip(), test.only(), and test.fixme() used for?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright provides two methods \u2014 <strong>isVisible()<\/strong> returns true or false, while <strong>toBeVisible()<\/strong> is an assertion that <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-left\" data-align=\"left\">Method<\/th><th class=\"has-text-align-left\" data-align=\"left\">What it does<\/th><th class=\"has-text-align-left\" data-align=\"left\">When to use<\/th><\/tr><tr><td><strong>test.skip()<\/strong><\/td><td>Test is skipped \u2014 not run at all<\/td><td>Feature not yet built, or test environment issue<\/td><\/tr><tr><td><strong>test.only()<\/strong><\/td><td>Only this test runs \u2014 all others are skipped<\/td><td>Temporarily run one test during development<\/td><\/tr><tr><td><strong>test.fixme()<\/strong><\/td><td>Test runs but is expected to fail \u2014 shown separately<\/td><td>Known bug tracked in JIRA \u2014 test documents the bug<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Skip this test completely\ntest.skip('Payment test \u2014 gateway is down in staging', async ({ page }) => {\n  \/\/ will not run\n});\n\n\/\/ Run ONLY this test (remove before committing!)\ntest.only('Login test', async ({ page }) => {\n  \/\/ only this runs\n});\n\n\/\/ Known bug \u2014 test runs but failure is expected\ntest.fixme('Cart count is wrong \u2014 BUG-1234', async ({ page }) => {\n  \/\/ documents the known bug\n});\n\n\/\/ Conditional skip \u2014 skip on Firefox only\ntest('Chrome-only feature test', async ({ page, browserName }) => {\n  test.skip(browserName !== 'chromium', 'This feature is Chrome-only');\n  \/\/ rest of test\n});<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/ Skip this test completely<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">test.<\/span><span style=\"color: #50FA7B\">skip<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Payment test \u2014 gateway is down in staging<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ will not run<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Run ONLY this test (remove before committing!)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">test.<\/span><span style=\"color: #50FA7B\">only<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Login test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ only this runs<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Known bug \u2014 test runs but failure is expected<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">test.<\/span><span style=\"color: #50FA7B\">fixme<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Cart count is wrong \u2014 BUG-1234<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ documents the known bug<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/ Conditional skip \u2014 skip on Firefox only<\/span><\/span>\n<span class=\"line\"><span style=\"color: #50FA7B\">test<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Chrome-only feature test<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FF79C6\">async<\/span><span style=\"color: #F8F8F2\"> ({ <\/span><span style=\"color: #FFB86C; font-style: italic\">page<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #FFB86C; font-style: italic\">browserName<\/span><span style=\"color: #F8F8F2\"> }) <\/span><span style=\"color: #FF79C6\">=&gt;<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  test.<\/span><span style=\"color: #50FA7B\">skip<\/span><span style=\"color: #F8F8F2\">(browserName <\/span><span style=\"color: #FF79C6\">!==<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">chromium<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">This feature is Chrome-only<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  <\/span><span style=\"color: #6272A4\">\/\/ rest of test<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-87\" style=\"color:#ff8d00\"><strong>87.How would you handle a CAPTCHA in your automation tests?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">CAPTCHA is designed to prevent automated access, so I would not try to automate or solve it directly. In the test or staging environment, I would work with the development\/security team to disable CAPTCHA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-88\" style=\"color:#ff8d00\"><strong>88. Explain Playwright\u2019s auto-waiting mechanism.<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Before performing an action such as click, Playwright checks whether the target is ready.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, it checks that the element is visible, stable, enabled and able to receive the event.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-89\" style=\"color:#ff8d00\"><strong>89. What are timeouts in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Timeout ensures that before marking test execution as a failure the amount of time the Playwright needs to wait.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-90\" style=\"color:#ff8d00\"><strong>90. How to navigate forward and backward in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The playwright provides specific commands to navigate backward and forward.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>page.goForward()<\/strong> command can be used to navigate forward from the browser history<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>page.goBack()<\/strong> command can be used to navigate backward from the browser history<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-91\" style=\"color:#ff8d00\"><strong>91. How do you perform single-click, double-click, and right-click in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Playwright, you can perform these mouse actions using locator methods.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282A36\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/1. Single Click\nawait page.getByRole('button').click();\n\n\n\/\/2. Double Click\nawait page.getByText('Item').dblclick();\n\n\/\/3. Right Click\nawait page.getByText('Item').click({ button: 'right' });\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6272A4\">\/\/1. Single Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">getByRole<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">button<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">click<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/2. Double Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">getByText<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Item<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">dblclick<\/span><span style=\"color: #F8F8F2\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6272A4\">\/\/3. Right Click<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FF79C6\">await<\/span><span style=\"color: #F8F8F2\"> page.<\/span><span style=\"color: #50FA7B\">getByText<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">Item<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\">).<\/span><span style=\"color: #50FA7B\">click<\/span><span style=\"color: #F8F8F2\">({ button<\/span><span style=\"color: #FF79C6\">:<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F1FA8C\">right<\/span><span style=\"color: #E9F284\">&#39;<\/span><span style=\"color: #F8F8F2\"> });<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-92\" style=\"color:#ff8d00\"><strong>92. What does <code>void<\/code> mean?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>void<\/code> means a function does not return a useful value.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">function message(): void {<br>console.log(&#8220;Hello&#8221;);<br>}<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-93\" style=\"color:#ff8d00\"><strong>93. How do you hover over an element?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">await page.getByText(&#8216;Products&#8217;).hover();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-94\" style=\"color:#ff8d00\"><strong>94. How do you refresh or reload a page?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">await page.reload();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-95\" style=\"color:#ff8d00\"><strong>95. How do you get the page title?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">const title = await page.title();<br>console.log(title);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-96\" style=\"color:#ff8d00\"><strong>96. What does <code>await<\/code> mean in a Playwright test?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>await<\/code> waits for an asynchronous operation to complete before the next statement continues.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">await page.goto(&#8216;<a href=\"https:\/\/logicnextgen.com\/\">https:\/\/logicnextgen.com\/<\/a>&#8216;);<br>await page.getByRole(&#8216;button&#8217;).click();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-97\" style=\"color:#ff8d00\"><strong>97. How do you check whether a button is enabled?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">await expect(page.getByRole(&#8216;button&#8217;)).toBeEnabled();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-98\" style=\"color:#ff8d00\"><strong>98. What is <code>test()<\/code> in Playwright?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">await page.reload();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>test()<\/code> defines a test case.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">test(&#8216;Login Test&#8217;, async ({ page }) =&gt; {<br>\/\/ test steps<br>});<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-99\" style=\"color:#ff8d00\"><strong>99. <\/strong>What does <code>expect()<\/code> do?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>expect()<\/code> is used to verify expected behavior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">await expect(page.getByText(&#8216;Welcome&#8217;)).toBeVisible();<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color has-medium-font-size wp-elements-100\" style=\"color:#ff8d00\"><strong>100.<\/strong> How do you press the Enter key from keyboard?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">await page.keyboard.press(&#8216;Enter&#8217;);<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Top Playwright TypeScript\/JavaScript Interview Questions &amp; Answers 1. What is TypeScript? TypeScript is a programming language built on JavaScript. It helps you find errors early and makes your code easier to write, understand, and maintain. In simple words:TypeScript = JavaScript + Type SafetyIt helps find coding mistakes early and makes code easier to maintain. 2. &#8230; <a title=\"Playwright TypeScript JavaScript Interview Questions and Answers\" class=\"read-more\" href=\"https:\/\/logicnextgen.com\/tutorials\/playwright-typescript-javascript-interview-questions-and-answers\/\" aria-label=\"Read more about Playwright TypeScript JavaScript Interview Questions and Answers\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1245","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/1245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/comments?post=1245"}],"version-history":[{"count":104,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/1245\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/pages\/1245\/revisions\/1456"}],"wp:attachment":[{"href":"https:\/\/logicnextgen.com\/tutorials\/wp-json\/wp\/v2\/media?parent=1245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}