---
# System prepended metadata

title: '[Product] Product specs'

---

# [Research] Mask element for testing 



## :beginner: Document Info

- Document Name: Exclude elements from testing by masking
- Status: 
    - [ ] In progress
    - [x] In review. Reviewer:
    - [ ] Finished

## :triangular_flag_on_post: Problem space

:::success
Describe the problems your users are expecting to solve.
:::
###  Functional expectations

- [x] 1.  exclusion of elements by "masking"
- [x] 2.  "masking" means that the element is not considered during the comparison of 2 screenshots.
- [x] 3.  in the result page, masked elements appear with a green overlay frame that is 90% transparent (meaning: user can still see through it to identify what is displayed. 
- [x] 4.  use Query Selectors in order to tell the system which element/s to mask/exclude 
- [x] 5.  this is a setting on project level 
- [x] 6.  user can list all the Query Selectors for all the screenshots in the same place (settings/mask).


## 📈  Solution space

:::success
Collect ideas that may solve the problems here.
:::

- Get the element selector from the user's settings. then create a test file for it




## :exclamation: Risks

:::success
List risks and possible hedges.
:::
 1.
 2.



## :small_blue_diamond: Flow

:::warning
Create a flow chart to show the process.
:::

```flow
st=>start: Start
select=>operation: Select Element
generate=>operation: Generate File Spec Test
test=>operation: playwright visual test
baseline=>condition: Baseline Exists?
create=>operation: Create Baseline
visual-test=>operation: playwright visual test
end=>end: End

st->select->generate->test->baseline
baseline(yes)->visual-test->end
baseline(no)->create->end

```


## :feet: Implementation

### Selector element 
 ![image](https://hackmd.io/_uploads/SJunt-onp.png)


### Code with playwright mask element
```
import { chromium, expect, test } from '@playwright/test';

test('Launch the Selectors hub test page', async () => {
  const browser = await chromium.launch({
    headless: false,
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://www.time.gov/');

  // We want to mask this locator
  let mask_locator = await page.locator(
    '#col-main > div.pad-2 > div:nth-child(4)'
  );
  let mask_locator_1 = await page.locator(
    '#col-main > div.pad-2 > div:nth-child(3)'
  );

  // Define the mask color (semi-transparent green)
  const maskColor = 'rgba(0, 128, 0, 0.9)'; // green transparent 70%

  await expect(page).toHaveScreenshot({
    mask: [mask_locator, mask_locator_1],
    maskColor: maskColor,
    fullPage: true,
  });
});

```
### Results of the first test run
- Since there is no base-line to compare, It will take a photo of the page and create base-line
 ![image](https://hackmd.io/_uploads/HkgGqbi3a.png)


 
 - Image base-line
 
    ![image](https://hackmd.io/_uploads/B1MQcbi3T.png)




### Results of the second test run
Meet the requirements the element is not considered during the comparison of 2 screenshots.

 - Images taken during this test

   ![image](https://hackmd.io/_uploads/BJUDq-oh6.png)


  - Image diff shows the comparison of this test
   
    ![image](https://hackmd.io/_uploads/BkK_cbs3a.png)


:::success
Describe how you implement this product, including flow, specs, and design.
:::


### :small_blue_diamond: Design
:::warning
Provide the design for this product. You can embed Figma files with this syntax `{%figma figmaurl %}`, or just paste the embed code here.
:::



## 💬 Open Questions

:::success
Discuss other things that are not on the above. For example, any blind spot on our product specs?
:::

1. 
2. 

### :small_blue_diamond: A checklist for stakeholders 
| Question                                        | Answer |
| ----------------------------------------------- |:------:|
| 1. What is the result you want?                 |        |
| 2. Why is this result important?                |        |
| 3. How will you evaluate progress?              |        |
| 4. How can you influence the result?            |        |
| 5. Who is responsible for the results?          |        |
| 6. How do you know you have achieved your goal? |        |
| 7. How often will you review?                   |        |