Update Cypress tests for 1px differences in breakpoints

[sarinapadilla]

Issue description

During Redesign testing, we discovered an issue where cgov breakpoints are not matching NCIDS breakpoints.

• Desktop
  • cgov: 1025px
  • NCIDS: 1024px
• Tablet
  • cgov: 641px
  • NCIDS: 640px

After review, we are accepting these issues for MVP1 go-live. The acceptance tests need to be updated to account for these single pixel breakpoints where they are not passing.

This is causing issues in some locations:

• Special report ( tablet and desktop) https://ncigovcdode511.prod.acquia-sites.com/special-report

  • Seeing tablet page content at 1024px, even though the desktop header is showing according to NCIDS.
  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Article (tablet) https://ncigovcdode511.prod.acquia-sites.com/about-cancer/treatment/side-effects https://ncigovcdode511.prod.acquia-sites.com/espanol/hoja-informativa-reconstruccion

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• PDQ Patient https://ncigovcdode511.prod.acquia-sites.com/types/lung/patient/lung-prevention-pdq

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• PDQ HP (tablet) https://ncigovcdode511.prod.acquia-sites.com/types/lung/hp/lung-prevention-pdq

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Home and Landing (tablet) https://ncigovcdode511.prod.acquia-sites.com/news-events

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• PDQ Drug Info Summary (tablet) https://ncigovcdode511.prod.acquia-sites.com/about-cancer/treatment/drugs/bevacizumab

• Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Press release (tablet) https://ncigovcdode511.prod.acquia-sites.com/news-events/press-releases/2018/leukemia-cll-ibrutinib-trial

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Blog series (tablet) https://ncigovcdode511.prod.acquia-sites.com/news-events/cancer-currents-blog

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Blog post ( tablet only) https://ncigovcdode511.prod.acquia-sites.com/news-events/cancer-currents-blog/2019/pancreatic-cancer-targeting-kras-indirectly

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• Biography (tablet) https://ncigovcdode511.prod.acquia-sites.com/about-cancer/coping/feelings/relaxation/loukissas-jen-biography

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

• SVPC (tablet) https://ncigovcdode511.prod.acquia-sites.com/test/types/liver/what-is-liver-cancer/treatment

  • Seeing mobile page content at 640px, even though tablet header is showing according to NCIDS.

ESTIMATE TBD

What's the expected change?

• The acceptance tests will pass despite the 1px difference between cgov and NCIDS breakpoints.

What's the current functionality?

• The acceptance tests fail due to the 1px difference between cgov and NCIDS breakpoints.

What's the updated acceptance criteria?

Additional details / screenshot

• ![Screenshot]()

Related Tickets

• Original Story Ticket #9999
• Original Story Ticket #9999

[KateMashkinaNIH]

this is merged