Udemy Playwright: Web Automation Testing From Zero to Hero: Difference between revisions
Jump to navigation
Jump to search
Udemy Playwright: Web Automation Testing From Zero to Hero (view source)
Revision as of 00:31, 13 June 2024
, 13 June→Visual Testing
m (→Visual Testing) |
m (→Visual Testing) |
||
| Line 2,057: | Line 2,057: | ||
I would like to try doing visual testing of small parts on the screen, and then test the integration of those parts but masking the smaller parts so that the larger integration test only checks that the sub parts are there, but not test the sub part internals. The mask option of <code>.toHaveScreenshot({mask: [maskedElement1,maskedElement2]})</code> can take an array of locators. However, this would apply the same colour to all of them, might try using CSS through <code>.toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') })</code> to render the elements with a solid block with different colours. | I would like to try doing visual testing of small parts on the screen, and then test the integration of those parts but masking the smaller parts so that the larger integration test only checks that the sub parts are there, but not test the sub part internals. The mask option of <code>.toHaveScreenshot({mask: [maskedElement1,maskedElement2]})</code> can take an array of locators. However, this would apply the same colour to all of them, might try using CSS through <code>.toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') })</code> to render the elements with a solid block with different colours. | ||
To do this I need to identify the child elements and set their <code>visibility: hidden;</code> and then the element to have <code>background-color: # | To do this I need to identify the child elements and set their <code>visibility: hidden;</code> and then the element to have <code>background-color: #909090;</code> | ||
<nowiki> | |||
ngx-form-layouts > div.row:nth-child(2) > div.col-md-6:nth-child(2) > nb-card:nth-child(1) > nb-card-body { | |||
visibility:hidden; | |||
} | |||
ngx-form-layouts > div.row:nth-child(2) > div.col-md-6:nth-child(2) > nb-card:nth-child(1) { | |||
background-color: #909090; | |||
}</nowiki> | |||
for the course's test web app. | |||
Could consider assigning colours programmatically at run time... | |||
=== Playwright with Docker Container === | === Playwright with Docker Container === | ||