# [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.
:::

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

### 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 base-line


### 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 diff shows the comparison of this test


:::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? | |