Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Screenshot testing for Chaise #2368

Open
jrchudy opened this issue Oct 26, 2023 · 1 comment
Open

Screenshot testing for Chaise #2368

jrchudy opened this issue Oct 26, 2023 · 1 comment
Labels
e2e Test investigation required Requires some initial investigation regression UI problems related to UI

Comments

@jrchudy
Copy link
Member

jrchudy commented Oct 26, 2023

When we migrated to ReactJS from AngularJS, we didn't do any exact comparisons of the old to new screens. There have been misalignment and other style issues that came up during testing for atlas-d2k release. One way we could do this is with "screenshot testing". The idea is to take a screencap of the page before and after and using a library compare the 2 images for differences.

This can be done for comparing angularJS to reactJS to point out any other differences. This can also be done when introduction changes or new features to test that other parts of the UI are unaffected. Some basic pages to test against would recordset, record, record related section, recordedit with 1 entity, and recordedit with 2 entities.

Look like this is all possible with playwright, more information:
https://playwright.dev/docs/test-snapshots

@jrchudy jrchudy added e2e Test UI problems related to UI investigation required Requires some initial investigation regression labels Oct 26, 2023
@RFSH
Copy link
Member

RFSH commented Oct 27, 2023

I experimented with this in my playwright branch but wanted to avoid pushing it to my branch. So, I'm going to copy the spec here:

import { test, expect } from '@playwright/test';

// locators
import RecordLocators from '@isrd-isi-edu/chaise/test/playwright/locators/record';
import RecordsetLocators from '@isrd-isi-edu/chaise/test/playwright/locators/recordset';

test.describe('visual testing atlas', () => {
  test('Collection recordset page', async ({ page }) => {
    await page.goto('https://atlas-d2k.org/chaise/recordset/#2/Common:Collection@sort(RMT::desc::,RID)');

    await RecordsetLocators.waitForRecordsetPageReady(page);
    await RecordsetLocators.waitForAggregates(page);

    // on  load we're focusing on the first opened one and therefore will have a different border
    await page.waitForTimeout(3000);

    await expect(page).toHaveScreenshot({ fullPage: true });
  })

  test('Collection record page', async ({ page }) => {
    await page.goto('https://atlas-d2k.org/chaise/record/#2/Common:Collection/RID=17-E76T');

    await RecordLocators.waitForRecordPageReady(page);

    await expect(page).toHaveScreenshot({ fullPage: true });

    await page.evaluate(() => {
      return document.querySelector('.related-section-container.chaise-accordions')!.scrollIntoView();
    });

    await expect(page).toHaveScreenshot({ fullPage: true });
  })

});
  • fullPage config allows us to screenshot the whole page. But because of how we're defining the scrollable section, it still won't be able to capture the page fully. That's why I'm scrolling to the related section and taking a different screenshot in the record page example.
  • While I'm using atlas-d2k in my example, this should be part of the test framework in our final solution. We must discuss whether we want to initiate this manually or have it as part of our automated testing. Regardless, it should use test data and not an existing production.
  • In our discussion, we discussed using this method as part of the review process for the UI features. So, for example, we could run a similar script on the master to get the initial screenshots and then rerun it on the feature branch to compare.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
e2e Test investigation required Requires some initial investigation regression UI problems related to UI
Projects
None yet
Development

No branches or pull requests

2 participants