[Testing:TAGrading] demo visual testing mkd

.github/workflows/submitty_ci.yml

@@ -560,7 +560,9 @@ jobs:
         if: failure()
         with:
           name: cypress-screenshots
-          path: ${{env.SUBMITTY_REPOSITORY}}/site/cypress/screenshots
+          path: |
+            ${{env.SUBMITTY_REPOSITORY}}/site/cypress/screenshots
+            ${{env.SUBMITTY_REPOSITORY}}/site/cypress-image-diff-screenshots
       - uses: actions/upload-artifact@v4
         if: failure()
         with:

.gitignore

@@ -34,6 +34,9 @@ coverage.xml
 /site/public/vue/
 /site/report/
 /site/incremental_build/
+/site/cypress-image-diff-screenshots/comparison/
+/site/cypress-image-diff-screenshots/diff/
+/site/cypress-image-diff-html-report
 
 db_update.php
 .setup/data/random_users.txt

site/app/templates/autograding/AutoChecks.twig

@@ -37,7 +37,7 @@
             </div>
           {% endif %}
         </div>
-        <div class="box-block">
+        <div class="box-block" data-testid="test-box-block">
             {% if not check.actual is defined and check.description is defined and check.messages is defined%}
                <h4 style="margin-bottom: 0">{{ check.description }}</h4>
                <div>

site/app/templates/autograding/AutoResults.twig

@@ -98,7 +98,7 @@
                     {% endif %}
                 {% endif %}
             >
-                <span class="loading-tools" id="details_tc_expand_all" style="float:right; margin: 0px 5px 0px 5px;">
+                <span class="loading-tools" id="details_tc_expand_all" data-testid="details-tc-expand-all" style="float:right; margin: 0px 5px 0px 5px;">
                     <span class="loading-tools-show" style="color: var(--standard-deep-blue); text-decoration: underline;">
                         Expand All Test Cases
                     </span>

site/app/templates/forum/ShowForumThreads.twig

@@ -104,7 +104,7 @@
                     }
                 });
             </script>
-            <div id="posts_list" style="overflow-y: auto; height:100%;" class="col-9">
+            <div id="posts_list" data-testid="markdown-post-list" style="overflow-y: auto; height:100%;" class="col-9">
 
                 {% include "forum/GeneratePostList.twig" with {
                     "userGroup" : generate_post_content.userGroup,

site/cypress/e2e/Cypress-Feature/forums.spec.js

@@ -63,6 +63,29 @@
     cy.get('[data-testid="thread-list-item"]').contains(title).should('not.exist');
 };
 
+describe('Visuals', () => {
+    Cypress.on('uncaught:exception', (err, runnable) => {
+    return false
+  });
+    it('should compare screenshot of the entire page', () => {
+        cy.viewport(1000, 920);
+        cy.login('instructor');
+        cy.visit(['sample', 'forum', 'threads', '9']);
+        cy.get('[data-testid="markdown-post-list"]').scrollTo('top');
+        cy.get('[data-testid="markdown-post-list"]').compareSnapshot('forum-threads-top', 0.02, {
+            capture: 'viewport',
+        });
+        cy.get('[data-testid="markdown-post-list"]').scrollTo('center');
+        cy.get('[data-testid="markdown-post-list"]').compareSnapshot('forum-threads-center', 0.02, {
+            capture: 'viewport',
+        });
+        cy.get('[data-testid="markdown-post-list"]').scrollTo('bottom');
+        cy.get('[data-testid="markdown-post-list"]').compareSnapshot('forum-threads-bottom', 0.02, {
+            capture: 'viewport',
+        });
+    });
+});
+
 const uploadAttachmentAndDelete = (title, attachment) => {
     cy.get('[data-testid="thread-list-item"]').contains(title).click();
     cy.get('[data-testid="create-post-head"]').should('contain', title);

site/cypress/plugins/index.js

@@ -12,10 +12,14 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+// eslint-disable-next-line no-undef
+const getCompareSnapshotsPlugin = require('cypress-image-diff-js/plugin');
+
 /**
  * @type {Cypress.PluginConfig}
  */
-export default function (/* on, config */) {
+export default function (on, config) {
     // `on` is used to hook into various events Cypress emits
     // `config` is the resolved Cypress config
+    return getCompareSnapshotsPlugin(on, config);
 }

site/cypress/support/e2e.js

@@ -27,3 +27,7 @@ afterEach(() => {
         cy.logout(true, checkLogout);
     });
 });
+
+// eslint-disable-next-line no-undef
+const compareSnapshotCommand = require('cypress-image-diff-js/command');
+compareSnapshotCommand();