<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\u00a01.\u00a0<\/b>What is Playwright?<\/h3>\n
Playwright is an open-source testing tool, which supports functional, API, and component testing. The playwright is managed by Microsoft.<\/p>\n
\n

\n<\/ins>\n<\/div>\n
2. <\/b>What is the difference between Selenium and Playwright?<\/h3>\n\n\n\n\n\n\n\n\n
\n
The playwright is ready to use a framework one can install and start using.<\/p>\n<\/td>\n
\n
Selenium Provides API\/Libraries you need to build the framework<\/p>\n<\/td>\n<\/tr>\n
\n
Playwright shipped with in-built assertion libraries<\/p>\n<\/td>\n
\n
Selenium doesn’t provide any assertions, we need to integrate using JUnit or TestNG<\/p>\n<\/td>\n<\/tr>\n
\n
The playwright uses the WebSocket connection to communicate with the browser<\/p>\n<\/td>\n
\n
Selenium uses the Webdriver API\/HTTP to communicate with the browser<\/p>\n<\/td>\n<\/tr>\n
\n
The playwright is faster compared to Selenium<\/p>\n<\/td>\n
\n
Selenium comparatively slower<\/p>\n<\/td>\n<\/tr>\n
\n
The playwright doesn’t support the safari stock browser rather it uses the open-source, Webkit browser to test safari<\/p>\n<\/td>\n
\n
Selenium supports Safari<\/p>\n<\/td>\n<\/tr>\n
\n
Playwright officially supports Java, Python, .NET C#, TypeScript, and JavaScript.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n<\/td>\n
\n
Selenium officially supports Java, Python, C#, Ruby, Perl, PHP, and JavaScript<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
3.<\/b>What are the advantages of a Playwright?<\/h3>\n
Compared to any other framework Playwright has a lot of advantages, as it is a modern solution it’s built on top of the limitation of another framework<\/p>\n
\n
The playwright is easy to install and learn<\/li>\n
Playwright supports Java, Python, .NET C#, TypeScript, and JavaScript.<\/li>\n
It supports both API and end-to-end testing<\/li>\n
Playwright supports Chromium-based browsers, Firefox, Safari(Webkit)<\/li>\n
As Playwright doesn’t use the webdriver API the execution is comparatively faster<\/li>\n
Playwright automatically waits before making any actions where a user doesn’t have to provide implicit or explicit waits<\/li>\n
Playwright allows Network traffic control. Mocks etc.<\/li>\n
Edge case scenarios like File upload and download can be handled easily in playwright<\/li>\n<\/ul>\n
<\/b><\/p>\n
4. <\/b>Name some disadvantages of Playwright.<\/h3>\n
Playwright doesn’t support Mobile automation (They might introduce it in the future)<\/li>\n
Playwright doesn’t support legacy IE Automation<\/li>\n
Playwright doesn\u2019t support Safari stock browser<\/li>\n
Some of the build tools like Teamcity is not directly support<\/li>\n
Some of the features like Ordering, Priority, and Dependancy tests which are available in TestNG are not available in Playwright yet.<\/li>\n<\/div>\n
\n
5. <\/b>What are the different testing types the Playwright supports?<\/h3>\n
Playwright supports functional testing, \u00a0API testing, and Component level testing.<\/p>\n
6. What are the programming languages that the playwright supports<\/h3>\n
Playwright supports Java, Python, .NET C#, TypeScript, and JavaScript. However, the Typescript\/Javascript version of Playwright is more stable and most used.<\/p>\n
7. <\/b>Briefly describe the commands that are used for Playwright installation and Execution of tests<\/h3>\n
As Playwright supports many programming languages each programming language follows its own installation process.<\/p>\n
In this context we are using the Playwright and Javascript we need to use the following commands<\/p>\n
Before installation, we need to ensure that NodeJS binaries are installed in our machine and then we can use<\/p>\n
npm init playwright@latest<\/p>\n
The above command will install the required packages and configurations. Once done we are ready to write the test cases.<\/p>\n
npx playwright test<\/p>\n
The command is used for executing playwright tests. By default, the playwright executes all the tests that are available for the project. <\/b><\/p>\n
8. <\/b>What is a Configuration File in Playwright explain?<\/h3>\n\n\n\n
\n
As the name indicates the configuration file is the place where we configure the execution behavior of the playwright. The configuration file is typically named playwright.config.ts(\/js).<\/p>\n
Using the configuration file we can configure headless mode, fullscreen, screenshot options, baseURL, browser options, etc.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
9. <\/b>What is @playwright\/test package in Playwright?<\/h3>\n
The Playwright can be used with different test runners such as Mocha, Jasmine, Jest, etc. Similar way playwright has its own test runner called the playwright test. The playwright test is the default test runner for the playwright.<\/p>\n
<\/b><\/p>\n
10. <\/b>What is Page class in Playwright?<\/h3>\n
The Page class in playwright is the main class, which provides the methods to interact with the browser. It also provides a set of event handlers that helps to execute a set of actions as soon as the event triggers.<\/p>\n
11. <\/b>How to navigate to specific URLs in Playwright explain with sample tests<\/h3>\n
const { test, expect } = require(“@playwright\/test”);<\/p>\n
test.describe(“navigation”, () => {<\/p>\n
\u00a0 test(“navigation”, async ({ page }) => {<\/p>\n
\u00a0\u00a0\u00a0 await page.goto(“https:\/\/playwright.dev\/”);<\/p>\n
\u00a0 });<\/p>\n
});<\/p>\n
The page.goto()<\/strong> is used for navigating to a specific URL.<\/p>\n
The test.describe()<\/strong> hook is used for grouping the set of tests<\/p>\n
The test()<\/strong> contains actual tests with playwright commands.<\/p>\n
12. <\/b>What are the different types of reporters that the playwright supports?<\/h3>\n
The playwright supports different types of reports<\/p>\n
\n
Dot reporter<\/li>\n
Line reporter<\/li>\n
HTML reporter<\/li>\n
JSON reporter<\/li>\n
JUnit reporter<\/li>\n
Custom reporter<\/li>\n<\/ul>\n
In addition to the above playwright also supports allure reporters using third-party plugins.<\/p>\n
13. <\/b>What are the locators in the Playwright list of any five<\/h3>\n
Locators help to find the elements on the page uniquely at any point in time.<\/p>\n
The page class provides the locator function.<\/p>\n
\n
page.getByText() : Find the element that matches the given text<\/li>\n
page.getByRole(): Find the element that matches the role attribute<\/li>\n
page.getByLabel(): Find the element that matches the label<\/li>\n
page.getByTestId(): Find the element that matches the data-testid attribute<\/li>\n
page.getByTitle(): Find the element that matches the title attribute<\/li>\n
page.locator(<css> or <xpath>): Find the element by using the CSS or XPath<\/li>\n<\/ul>\n
14. <\/b>What are the different types of text selectors available in Playwright?<\/h3>\n
Text-based locators in Playwright are a unique feature, that helps to locate the element which is having specific text<\/p>\n
locator.(<some_text) :<\/strong> Matches the element that has passed text<\/p>\n
\u00a0Ex: await page.locator(‘text=Home menu’)<\/p>\n
:text-is():<\/strong> this can be used inside the CSS selector, which will perform the exact match before finding the elements<\/p>\n
Ex: await page.locator(‘#nav-bar :text-is(“Home”)’)<\/p>\n
:has-text():<\/strong> This is another pseudo-class, which matches the element which contains the passed text.<\/p>\n
Example: await page.locator(‘:has-text(“Playwright”)’)<\/p>\n
<\/i><\/p>\n
15. <\/b>How to use assertions in Playwright? List any 5<\/h3>\n
Playwright Test uses the jest expect library for assertions.<\/p>\n
The Playwright supports soft and hard assertions both.<\/p>\n
There are many assertions which expect library provides some of them are<\/p>\n
expect(value1).toBe(value2):<\/strong> This helps to compare two values. Like equals of two strings etc.<\/p>\n
expect(<Boolean_value1).toBeTruthy():<\/strong> Assert two boolean values to be true.<\/p>\n
expect(locator).toBeVisible():<\/strong> Ensured specified locator is Visible on DOM<\/p>\n
expect(locator).toContainText(expected_text):<\/strong> Ensures the specific DOM element contains the given text<\/p>\n
expect(locator).toHaveClass(expected_class):<\/strong> Ensures the locator has specified css class<\/p>\n
expect(locator).toHaveCount(count):<\/strong> Ensures the given locator count in dom should be equal to “count”<\/p>\n
expect(page).toHaveTitle(title):<\/strong> Verifies the page title is the same as expected<\/p>\n
16. <\/b>What are soft assertions in Playwright?<\/h3>\n
By default when the assertions fail the test terminates, but if we use the soft assertions do not terminate the execution, but the test will be marked as failed at the end.<\/p>\n
The Playwright provides a command<\/p>\n
expect.soft() for soft assertions<\/p>\n
Example:<\/p>\n
expect.soft(page.locator(‘#title’).toHaveText(‘Udemy’)<\/p>\n
<\/b><\/p>\n
17. <\/b>How to negate the Matchers\/Assertions in Playwright? Or How can I verify not conditions in Playwright?<\/h3>\n
The Negation matchers are most commonly used in Playwright.<\/p>\n
The .not<\/strong> can be used in Playwright to Negate the assertions<\/p>\n
For example, if we have to verify the a should not equal 10 then we can use<\/p>\n
expect(a)not.toBe(10)<\/strong><\/p>\n
The not is generic keyword can be used with any assertions to negate the condition.<\/p>\n
18. <\/b>Does Playwright support XPath? If so how can I use them in the test?<\/h3>\n
Yes, Playwright supports both CSS and XPath selectors.<\/p>\n
The page.locator()<\/strong> function can be used for XPath.<\/p>\n
The page.locator() automatically detects the passed value is XPATH or CSS and returns the locator accordingly<\/p>\n
Whenever Playwright sees the selector staring with \/\/ or .. then the playwright assumes it is the XPath<\/p>\n
Example:<\/p>\n
await page.locator(“\/\/button[@id=’someid’]”).click();<\/p>\n
19. <\/b>What are command line options in the Playwright? Explain 5 helpful options<\/h3>\n
The configuration file contains the same set of run time configurations, the command line options also provide the run time configurations. When the same option is used in both places the command line options take priority.<\/p>\n
20. <\/b>Some of the Important command line options<\/h3>\n
\n
Run all the tests<\/strong><\/li>\n<\/ul>\n
npx playwright test<\/p>\n
\n
Run a single test file<\/strong><\/li>\n<\/ul>\n
npx playwright test tests\/todo-single.spec.ts<\/p>\n
\n
Run multiple tests<\/strong><\/li>\n
npx playwright test tests\/todo-page\/ tests\/landing-page\/<\/li>\n
Run tests in headed mode<\/strong><\/li>\n<\/ul>\n
npx playwright test –headed<\/p>\n
\n
Run tests on Specific browser<\/strong><\/li>\n<\/ul>\n
npx playwright test –browser “chromium”<\/p>\n
\n
Retry failed test<\/strong><\/li>\n
npx playwright test –retries 2<\/li>\n<\/ul>\n
21. What is headed and headless mode in Playwright<\/h3>\n
\n
The headed mode browser is just like any other browser. For example, if you open a chrome browser opens you can see it visually and perform the action on it.<\/li>\n
The headless browser execution happens in the background, the actions and browsers are cannot be seen. The headless browser execution is faster than the headed mode.<\/li>\n<\/ul>\n
22. Does Playwright support HTML reporters? How to Generate HTML reports in Playwright? \u00a0<\/h3>\n
Playwright supports default HTML reporter. You can generate the HTML reporters using the below command.<\/p>\n
npx playwright test –reporter=html<\/strong><\/p>\n
23. What are timeouts in Playwright? What are the different types of Timeouts available in Playwright?<\/h3>\n
Timeout ensures that before marking test execution as a failure the amount of time the Playwright needs to wait.<\/p>\n
In Playwright timeouts can be set at different levels<\/p>\n
Test timeout:<\/strong> This is applicable for test and fixture execution time.<\/p>\n
Expect timeout:<\/strong> Timeout for assertions<\/p>\n
Action timeout:<\/strong> Timeout for each action<\/p>\n
Navigation timeout: <\/strong>Timeout application for Navigation actions such as page.goto() etc.<\/p>\n
Global timeout: <\/strong>Global Timeout for the whole test run<\/p>\n
beforeAll\/afterAll timeout:<\/strong> Timeout applicable for beforeAll\/afterAll hooks<\/p>\n
Fixture timeout:<\/strong> This timeout is set to individual fixtures.<\/p>\n
24. How to navigate forward and backward in Playwright?<\/h3>\n
The playwright provides specific commands to navigate backward and forward.<\/p>\n
page.goForward()<\/strong> command can be used to navigate forward from the browser history<\/p>\n
page.goBack()<\/strong> command can be used to navigate backward from the browser history<\/p>\n
25. How to perform actions using the Playwright?<\/h3>\n
The Page class provides different locator strategies. First, you need to find the element using locators and then perform actions.<\/p>\n
For example, if you need to perform a click action on a button you can do it as shown below<\/p>\n
await page.locator(‘#myButton’).click();<\/p>\n
26. Does playwright support the safari browser if so can we execute the test on safari?<\/h3>\n
Unlike selenium, Playwright doesn’t support the Native safari browser. The Playwright supports the open-source version of Safari which is a Webkit browser.<\/p>\n
You can execute the tests on the Safari Webkit browser using the configurations in the config file below:<\/p>\n
const config = {<\/p>\n
\u00a0 use: {<\/p>\n
\u00a0\u00a0\u00a0 channel: ‘chrome’,<\/p>\n
\u00a0 },<\/p>\n
};<\/p>\n
By specifying in the command line parameter<\/p>\n
npx playwright test –browser “webkit”<\/p>\n
27. How to wait for a specific element in Playwright?<\/h3>\n
The playwright has an auto-waiting mechanism that reduces the usage of explicit waits in the test. However, in some scenarios, we might need to wait for specific elements in that case we can use the .waitFor()<\/p>\n
Example:<\/p>\n
const someElement = page.locator(‘#myElement);<\/p>\n
await someElement.waitFor();<\/p>\n
By default waitFor() waits for the element to be visible, however, the behavior can be changed to waitFor attached, detached, hidden<\/p>\n
Example: await someElement.waitFor({ state: ‘attached’ })<\/p>\n
28. What is browser context?<\/h3>\n
Browser context provides a way to operate multiple independent browser sessions. The browser class provides newContext() method which helps to create a new browser context.<\/p>\n
Example:<\/p>\n
const contxt = browser.newContext()<\/p>\n
29. How to open multiple windows in Playwright?<\/h3>\n
The playwright provides a way to open multiple windows. In Playwright each window is called Pages.<\/p>\n
You can create multiple pages like below<\/p>\n
const pageOne = await context.newPage();<\/p>\n
const pageTwo = await context.newPage();<\/p>\n
30. How to handle iFrame in PLaywright?<\/h3>\n
The frameLocator()<\/strong> gets the frame on a particular page in Playwright. Using frameLocator() we can perform various actions on the iFrame<\/p>\n
Example:<\/p>\n
const button = await page.frameLocator(‘#my_ifr’).locator(‘#button_my)<\/p>\n
31. Explain some of the click and double click actions with its options.<\/h3>\n
click():<\/strong> action is used for clicking any element on the page.<\/p>\n
dblclick:<\/strong> The dblclick() is used to perform the double click on the element.<\/p>\n
Both of the above click takes multiple parameters for example:<\/p>\n
force:<\/em><\/strong> PLaywright waits for actionability it internally checks for if the element is ready to click. The force option helps bypass this option<\/p>\n
locator.click({force:true});<\/p>\n
position:<\/em><\/strong> Position can be used to perform the coordinates with respect to the element.<\/p>\n
delay:<\/em><\/strong> can be used for time between mouseup and mousedown<\/p>\n
32. How to perform a right-click on Playwright?<\/h3>\n
The playwright doesn’t have a separate command for right click, in order to right click we need to use the click action with the button parameter<\/p>\n
Example:<\/p>\n
locator.click({button:right})<\/p>\n
33. How to evaluate Javascript in Playwright?<\/h3>\n
The playwright provides page.evaluate() function, which can be used for evaluating any javascript function.<\/p>\n
Example:<\/p>\n
const href = await page.evaluate(() => document.location.href);<\/p>\n
34. What are Playwright fixtures?<\/h3>\n
Test fixtures are used to establish an environment for each test. Some of the pre-defined fixtures are page, context, browser, browserName. The fixture is isolated for each test.<\/p>\n
Consider you have multiple tests like below<\/p>\n
test(‘basic test’, async ({ page }) => {<\/p>\n
\u00a0 await page.goto(‘https:\/\/playwright.dev\/’);<\/p>\n
});<\/p>\n
test(‘basic click, async ({ page }) => {<\/p>\n
\u00a0\u00a0await page.locator(‘#logo’).click();<\/p>\n
});<\/p>\n
Though you expect the above test to be executed one after the other, the test runs and fails. As the page fixture is isolated.<\/p>\n
You can override the default fixtures like below.<\/p>\n
For example, the above test can be rewritten to execute correctly<\/p>\n
let todoPage;<\/p>\n
test.beforeEach(async ({ page }) => {<\/p>\n
\u00a0\u00a0\u00a0 todoPage = new TodoPage(page);<\/p>\n
\u00a0 });<\/p>\n
test(‘basic test’, async () => {<\/p>\n
\u00a0 await todoPage.goto(‘https:\/\/playwright.dev\/’);<\/p>\n
});<\/p>\n
test(‘basic click, async () => {<\/p>\n
\u00a0 await todoPage.locator(‘#logo’).click();<\/p>\n
});<\/p>\n
You can notice that the todoPage<\/strong> is shared between tests.<\/p>\n
35. What is CodeGen in Playwright?<\/h3>\n
Playwright codeGen is similar to the selenium test recorder, the CodeGen<\/strong> is a tool that comes with playwright you can use it for recording the Playwright tests.<\/p>\n
36. How to parameterize tests in Playwright?<\/h3>\n
Parameterize helps to run the same tests with multiple values, some times it is also called as data-driven testing. Playwright allows parameterization, you can use data from either csv, json or plain arrays. To implement parameterization you need to use for or foreach loop.<\/p>\n
Example:<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 const fruits = [‘Banana’, ‘Orange’,’Apple’];<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 for (const name of fruits) {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 test(`testing with ${name}`, async () => {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/your code<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 });<\/p>\n
\u00a0 \u00a0 \u00a0 \u00a0}<\/p>\n
37. Write a code to upload the file<\/h3>\n
\n
The playwright provides a special command to upload a single file or multiple files. The command setInputFile() or setInputFiles() is used for uploading the file in Playwright.<\/li>\n
Example:<\/li>\n
Upload single file:<\/strong><\/li>\n<\/ul>\n
await page.getByLabel(‘Upload file ‘).setInputFiles(‘myfile.pdf’);<\/p>\n
\n
Upload multiple files:<\/strong><\/li>\n<\/ul>\n
await page.getByLabel(‘Upload files’).setInputFiles([‘file1.pdf’, ‘file2.pdf’]);<\/p>\n
\n
Note: Passing empty array to setInputFiles() makes unselect the files if you are already selected.<\/em><\/strong><\/li>\n
Example:<\/li>\n<\/ul>\n
await page.getByLabel(‘Upload file’).setInputFiles([]);<\/p>\n
38. Write a code to download the file<\/h3>\n
\n
The upload and download files are edge case scenarios, Playwright has dedicated commands for both. The download files can be performed in the playwright using the waitForEvent() in the playwright.<\/li>\n
Example:<\/li>\n<\/ul>\n
const [ download ] = await Promise.all([<\/p>\n
\u00a0 page.waitForEvent(‘download’),<\/p>\n
\u00a0 \/\/ Perform the action that initiates download<\/p>\n
\u00a0 page.locator(‘button#delayed-download’).click(),<\/p>\n
]);<\/p>\n
\n
Once the download is complete you can get the downloaded path using the command<\/li>\n<\/ul>\n
const downloadedPath = await download.path();<\/p>\n
39. How to perform drag and drop in Playwright?<\/h3>\n
\n
Drag and drop can be performed using multiple ways<\/li>\n
Using dragTo() command<\/li>\n
Manually specifying mouse actions<\/li>\n<\/ul>\n
Using dragTo() function for drag and drop<\/strong><\/p>\n
You need to pass the target position locator to dragTo function<\/p>\n
Example:<\/p>\n
await page.locator(‘#item-to-be-dragged’).dragTo(page.locator(‘#item-to-drop-at’));<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 The above dragTo() function internally does<\/p>\n
\n
Hovers on the item to be dragged<\/li>\n
Clicks on the item to be dragged<\/li>\n
Move the mouse to target location<\/li>\n
Rleases the left mouse button<\/li>\n<\/ul>\n
As mentioned earlier, you can use the manual method, by perfoming all the above actions instead of dragTo() function.<\/p>\n
Manual way to drag and drop<\/strong><\/p>\n
await page.locator(‘#item-to-be-dragged’).hover();<\/p>\n
await page.mouse.down();<\/p>\n
await page.locator(‘#item-to-drop-at’).hover();<\/p>\n
await page.mouse.up();<\/p>\n
40. How to handle browser popups or dialogs?<\/h3>\n
\n
Dialog popups are native to the browser or operating systems. The dialogs need special mechanism to handle as you cannot inspect the locator for these pop-ups.<\/li>\n
There are different types of pop ups such as alert(), confirm(), prompt()<\/li>\n
Handling Alert<\/strong><\/li>\n
\/\/Click on Ok<\/li>\n<\/ul>\n
page.on(‘dialog’, dialog => dialog.accept());<\/p>\n
\n
Handling confirm<\/strong><\/li>\n
\/\/Click on Ok<\/li>\n<\/ul>\n
page.on(‘dialog’, dialog => dialog.accept());<\/p>\n
\/\/Click on Cancel<\/p>\n
page.on(‘dialog’, dialog => dialog.dismiss ());<\/p>\n
\n
Handling Prompt<\/strong><\/li>\n
\/\/Type the text, RSAcademy and Accept the pop up<\/li>\n<\/ul>\n
page.on(‘dialog’, dialog => dialog.accept(“RSAcademy”));<\/p>\n
41. What is testInfo Object?<\/h3>\n
testInfo object contains information about tests that are currently running such as duration, errors, project, status, \u00a0etc. Using the testInfo object we can control the test execution.<\/p>\n
42. What is testError Object?<\/h3>\n
The testError object in PLaywright contains information about errors thrown during the test execution such as error message, stack, and value.<\/p>\n
43. What is global setup and tear down explain?<\/h3>\n
\n
The global setup is one-time setup that is needed for test execution. The global setup is executed before starting any tests. For example, if you want to set up some files, and URLs you can utilize this function.<\/li>\n
Similarly, the global teardown is a one-time teardown option provided by Playwright. The global teardown will be executed after all the tests are executed. This will be helpful to generate custom reports, sending emails, freeing up resources, etc.<\/li>\n
Example Global Set up<\/strong><\/li>\n<\/ul>\n
\/\/ global-setup.js<\/p>\n
module.exports = async config => {<\/p>\n
\u00a0 const {storageState } = config.projects[0].use;<\/p>\n
};<\/p>\n
\/\/ playwright.config.js<\/p>\n
const config = {<\/p>\n
\u00a0 globalSetup: require.resolve(‘.\/global-setup’),<\/p>\n
\u00a0 use: {<\/p>\n
\u00a0\u00a0\u00a0 storageState: ‘state.json’,<\/p>\n
\u00a0 },<\/p>\n
};<\/p>\n
module.exports = config;<\/p>\n
\n
Example Global Teardown<\/strong><\/li>\n<\/ul>\n
\/\/ global-teardown.js<\/p>\n
module.exports = async config => {<\/p>\n
\u00a0\/\/Some code<\/p>\n
};<\/p>\n
\/\/ playwright.config.js<\/p>\n
const config = {<\/p>\n
\u00a0 globalTeardown: require.resolve(‘.\/global-teardown),<\/p>\n
\u00a0 use: {<\/p>\n
\u00a0\u00a0\u00a0 storageState: ‘state.json’,<\/p>\n
\u00a0 },<\/p>\n
};<\/p>\n
\u00a0module.exports = config;<\/p>\n
<\/p>\n
44. How to capture Network logs in Playwright?<\/h3>\n
The playwright provides a way to monitor browser network logs. You can capture all the request and response network logs and their status. Using the listener<\/p>\n
page.on(‘request’, request =><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(‘>>’, request.method(), request.url()));<\/p>\n
\u00a0 page.on(‘response’, response =><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(‘<<‘, response.status(), response.url()));<\/p>\n
\u00a0 await page.goto(‘https:\/\/example.com’);<\/p>\n
45. How to capture screenshots in PLaywright?<\/h3>\n
\n
The Playwright allows taking the screenshot. the page.screenshot() function is provided by Playwright to the screenshot. You can place the screenshot() command anywhere in the code to save the screenshot.<\/li>\n
Take the full page screenshot<\/strong><\/li>\n<\/ul>\n
await page.screenshot({ path: ‘screenshot.png’, fullPage: true });<\/p>\n
\n
Take the Element level screenshot<\/strong><\/li>\n<\/ul>\n
await page.locator(‘.header’).screenshot({ path: ‘screenshot.png’ });<\/p>\n
46. Does Playwright support API testing? If so how can we perform API testing?<\/h3>\n
Yes, Playwright supports API Testing. We can perform any HTTP API method calls such as GET, POST etc. using the playwright and validate the status and responses.<\/p>\n
Example:<\/p>\n
test(“Get users”, async ({ request, baseURL }) => {<\/p>\n
\u00a0 const apiResponse = await request.get(`${baseURL}public\/v2\/users\/`);<\/p>\n
\u00a0 expect(apiResponse.ok()).toBeTruthy();<\/p>\n
\u00a0 expect(apiResponse.status()).toBe(200);<\/p>\n
});<\/p>\n
47. What is Visual Testing? Why do we need it?<\/h3>\n
\n
Visual Testing is also known as visual comparisons, where two screenshots will be compared. The first screenshot is called the reference or base image, the subsequent run will compare the recent screenshot with reference images and produce the results.<\/li>\n
Visual comparison testing is helpful for UI testing. Using functional testing we will not be able to validate the fonts, styles, typography, alignment, etc. but using the visual comparison we can validate everything related to the application User interface.<\/li>\n<\/ul>\n
48. Write a simple code to Test Visually<\/h3>\n
For example, if we need to compare the home page we need to write the below code in Playwright.<\/p>\n
test(‘Visual test homepage’, async ({ page }) => {<\/p>\n
\u00a0 await page.goto(‘https:\/\/playwright.dev’);<\/p>\n
\u00a0 await expect(page).toHaveScreenshot();<\/p>\n
});<\/p>\n
\n
During the first run, the playwright stores the reference image of the homepage, and the next run will be compared against the reference image.<\/li>\n
Optionally we can pass the pixel differences if we need to ignore the minor differences in the image.<\/li>\n<\/ul>\n
test(‘example test’, async ({ page }) => {<\/p>\n
\u00a0 await page.goto(‘https:\/\/playwright.dev’);<\/p>\n
\u00a0 await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });<\/p>\n
});<\/p>\n
49. How to configure multiple reporters in Playwright?<\/strong><\/h3>\n
The playwright allows configuring multiple reporters. The reporter option is available on the playwright.config.js, you can specify the reporter types to configure multiple reporters.<\/p>\n
Example:<\/p>\n
\/\/ playwright.config.js<\/p>\n
const config = {<\/p>\n
\u00a0 reporter: [<\/p>\n
\u00a0\u00a0\u00a0 [‘list’],<\/p>\n
\u00a0\u00a0\u00a0 [‘line’],<\/p>\n
\u00a0\u00a0\u00a0 [‘json’, {\u00a0 outputFile: ‘test-results.json’ }]<\/p>\n
\u00a0 ],<\/p>\n
};<\/p>\n
module.exports = config;<\/p>\n
50. What is the serial mode in Playwright?<\/h3>\n
In some scenarios, tests may be inter dependent. The second test might need the output of the first one. Running tests parallelly in such cases will create the test cases to fail and it’s like a false failure. The serial mode allows running the tests serially one after the another. If one test fails all remaining tests are skipped and can be retried as a group again.<\/p>\n
Example:<\/p>\n
test.describe.configure({ mode: ‘serial’ });<\/p>\n
let page;<\/p>\n
test.beforeAll(async ({ browser }) => {<\/p>\n
\u00a0 page = await browser.newPage();<\/p>\n
});<\/p>\n
test.afterAll(async () => {<\/p>\n
\u00a0 await page.close();<\/p>\n
});<\/p>\n
test(‘runs first’, async () => {<\/p>\n
\u00a0 await page.goto(‘https:\/\/playwright.dev\/’);<\/p>\n
});<\/p>\n
test(‘runs second’, async () => {<\/p>\n
\u00a0 await page.getByText(‘Get Started’).click();<\/p>\n
});<\/p>\n
51. How to perform parallel execution in PLaywright?<\/h3>\n
\n
The playwright supports parallel execution. Parallel execution can be achieved at the global level or test level in the playwright.<\/li>\n
Parallel in test file level<\/li>\n
The mode: ‘parallel’ can be passed to describe.configure() function to achieve parallelism.<\/li>\n<\/ul>\n
Example:<\/p>\n
test.describe.configure({ mode: ‘parallel’ });<\/p>\n
test(‘runs in parallel 1’, async ({ page }) => { \/* … \/ });<\/p>\n
test(‘runs in parallel 2’, async ({ page }) => { \/ … *\/ });<\/p>\n
\n
Parallel option in the playwright config file<\/li>\n
We can mention the fullyParallel option in the configuration file, this makes the tests run parallelly to all tests.<\/li>\n<\/ul>\n
\/\/playwright.config.js<\/p>\n
const config = {<\/p>\n
\u00a0 fullyParallel: true,<\/p>\n
};<\/p>\n
module.exports = config;<\/p>\n
52. How to perform mobile device emulation in Playwright?<\/h3>\n
\n
The emulation features allow testing the application in mobile mode or tablet mode by changing the properties of the browser such as screensize, useragent, geolocation etc.<\/li>\n
For example, if we need to test the mobile safari we can specify the option in the playwright config file like below.<\/li>\n<\/ul>\n
const config = {<\/p>\n
\u00a0 projects: [<\/p>\n
\u00a0\u00a0\u00a0 {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 name: ‘Mobile Safari’,<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 use: {<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 …devices[‘iPhone 12’],<\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 },<\/p>\n
\u00a0\u00a0\u00a0 },<\/p>\n
\u00a0 ],<\/p>\n
};<\/p>\n
module.exports = config;<\/p>\n
\n
Similarly, we can set the viewport to match the mobile or tablet screen size<\/li>\n<\/ul>\n
const config = {<\/p>\n
\u00a0\u00a0use: {<\/p>\n
\u00a0\u00a0\u00a0 viewport: { width: 580, height: 720 },<\/p>\n
\u00a0 },<\/p>\n
};<\/p>\n
module.exports = config;<\/p>\n
53. Mention some of the helpful ways to debug Playwright tests.<\/h3>\n
\n
The playwright provides multiple ways to debug.<\/li>\n
Using the debug option in the command line.<\/li>\n<\/ul>\n
npx playwright test –debug<\/p>\n
\n
Debug single test<\/strong><\/li>\n<\/ul>\n
npx playwright test example.spec.ts –debug<\/p>\n
VSCode extension<\/strong><\/p>\n
\n
Apart from the command line debugging option Playwright also provides the VSCode extension “Playwright Test for VSCode”<\/strong><\/li>\n
Trace on option<\/strong><\/li>\n
You can also force the Playwright to record the trace by passing the –trace on option.<\/li>\n
Example:<\/li>\n<\/ul>\n
npx playwright test –trace on<\/p>\n
Pause option<\/strong><\/p>\n
page.pause() can also be used inside the test script to pause the test and do some debugging.<\/p>\n
54. What is actionability in Playwright? Explain in detail<\/h3>\n
\n
Playwright architecture has a special type of checks before performing any actions on elements. The checks are called actionability checks.<\/li>\n
For example when you do click operation page.click()<\/li>\n
It will perform many checks internally such as<\/li>\n
Element is attached to DOM<\/li>\n
Element is Visible<\/li>\n
Element is Stable and animation is completed(if any)<\/li>\n
Element is ready to receive the events<\/li>\n
Element is enabled.<\/li>\n<\/ul>\n
This mechanism is also called automatic waiting in the Playwright. Since the Playwright performs all the above checks by default one is no need to perform the above checks manually.<\/p>\n
55. Mention some of the advantages of Playwright compared to Cypress<\/h3>\n
The Cypress and Playwright share a lot of similarities and Playwright overcomes a lot of limitations that cypress has<\/li>\n
The playwright supports iFrame, Cypress doesn\u2019t<\/li>\n
Playwright supports multiple windows\/tabs, Cypress doesn’t<\/li>\n
A playwright can test the cross-domain URLs whereas Cypress doesn’t support<\/li>\n
Playwright supports Safari Webkit browser Cypress doesn’t support Safari<\/li>\n
Playwright supports multiple languages such as Java, Javascript, Python, and C#, the Cypress supports only Javascript\/Typescript\u00a0<\/li>\n
<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n<\/section>\n
<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"
Table of Contents \u00a01.\u00a0What is Playwright? 2. What is the difference between Selenium and Playwright? 3.What are the advantages of a Playwright? 4. Name some disadvantages of Playwright. 5. What are the different testing types the Playwright supports? 6. What are the programming languages that the playwright supports 7. Briefly describe the commands that are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-2418","post","type-post","status-publish","format-standard","hentry","category-interview-questions","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2418"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2418\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

6. What are the programming languages that the playwright supports<\/h3>\nPlaywright supports Java, Python, .NET C#, TypeScript, and JavaScript. However, the Typescript\/Javascript version of Playwright is more stable and most used.<\/p>\n

22. Does Playwright support HTML reporters? How to Generate HTML reports in Playwright? \u00a0<\/h3>\nPlaywright supports default HTML reporter. You can generate the HTML reporters using the below command.<\/p>\nnpx playwright test –reporter=html<\/strong><\/p>\n

28. What is browser context?<\/h3>\nBrowser context provides a way to operate multiple independent browser sessions. The browser class provides newContext() method which helps to create a new browser context.<\/p>\nExample:<\/p>\nconst contxt = browser.newContext()<\/p>\n

30. How to handle iFrame in PLaywright?<\/h3>\nThe frameLocator()<\/strong> gets the frame on a particular page in Playwright. Using frameLocator() we can perform various actions on the iFrame<\/p>\nExample:<\/p>\nconst button = await page.frameLocator(‘#my_ifr’).locator(‘#button_my)<\/p>\n

33. How to evaluate Javascript in Playwright?<\/h3>\nThe playwright provides page.evaluate() function, which can be used for evaluating any javascript function.<\/p>\nExample:<\/p>\nconst href = await page.evaluate(() => document.location.href);<\/p>\n

41. What is testInfo Object?<\/h3>\ntestInfo object contains information about tests that are currently running such as duration, errors, project, status, \u00a0etc. Using the testInfo object we can control the test execution.<\/p>\n

42. What is testError Object?<\/h3>\nThe testError object in PLaywright contains information about errors thrown during the test execution such as error message, stack, and value.<\/p>\n

6. What are the programming languages that the playwright supports<\/h3>\n
Playwright supports Java, Python, .NET C#, TypeScript, and JavaScript. However, the Typescript\/Javascript version of Playwright is more stable and most used.<\/p>\n

22. Does Playwright support HTML reporters? How to Generate HTML reports in Playwright? \u00a0<\/h3>\n
Playwright supports default HTML reporter. You can generate the HTML reporters using the below command.<\/p>\n
npx playwright test –reporter=html<\/strong><\/p>\n

28. What is browser context?<\/h3>\n
Browser context provides a way to operate multiple independent browser sessions. The browser class provides newContext() method which helps to create a new browser context.<\/p>\n
Example:<\/p>\n
const contxt = browser.newContext()<\/p>\n

33. How to evaluate Javascript in Playwright?<\/h3>\n
The playwright provides page.evaluate() function, which can be used for evaluating any javascript function.<\/p>\n
Example:<\/p>\n
const href = await page.evaluate(() => document.location.href);<\/p>\n

41. What is testInfo Object?<\/h3>\n
testInfo object contains information about tests that are currently running such as duration, errors, project, status, \u00a0etc. Using the testInfo object we can control the test execution.<\/p>\n

42. What is testError Object?<\/h3>\n
The testError object in PLaywright contains information about errors thrown during the test execution such as error message, stack, and value.<\/p>\n