diff --git a/app/components/Operator/OperatorTableRow.tsx b/app/components/Operator/OperatorTableRow.tsx
index a4c3caba30..3f46a708fa 100644
--- a/app/components/Operator/OperatorTableRow.tsx
+++ b/app/components/Operator/OperatorTableRow.tsx
@@ -9,13 +9,7 @@ interface Props {
 }
 
 const OperatorTableRow: React.FC<Props> = ({ operator }) => {
-  const {
-    id,
-    legalName,
-    tradeName,
-    bcRegistryId,
-    operatorCode
-  } = useFragment(
+  const { id, legalName, tradeName, bcRegistryId, operatorCode } = useFragment(
     graphql`
       fragment OperatorTableRow_operator on Operator {
         id
diff --git a/app/cypress/integration/cif/operators.spec.js b/app/cypress/integration/cif/operators.spec.js
new file mode 100644
index 0000000000..e8b9e83e71
--- /dev/null
+++ b/app/cypress/integration/cif/operators.spec.js
@@ -0,0 +1,36 @@
+import logAxeResults from "../../plugins/logAxeResults";
+
+describe("the operators page", () => {
+  beforeEach(() => {
+    cy.sqlFixture("e2e/dbReset");
+    cy.sqlFixture("dev/001_cif_user");
+    cy.sqlFixture("dev/002_cif_operator");
+    cy.sqlFixture("dev/003_cif_project");
+    cy.mockLogin("cif_internal");
+  });
+
+  it("displays the list of operators", () => {
+    cy.visit("/cif/operators");
+    cy.get("h2").contains("Operators");
+    cy.injectAxe();
+    cy.checkA11y("main", null, logAxeResults);
+    cy.get("body").happoScreenshot({
+      component: "Operators Page",
+    });
+  });
+
+  it("allows the list of operators to be paginated, filtered and ordered", () => {
+    cy.visit("/cif/operators");
+    cy.get("h2").contains("Operators");
+    cy.get("tbody tr").should("have.length", 3);
+    cy.get("[placeholder='Filter']").first().type("first operator legal name");
+    cy.get("button").contains("Apply").click();
+    cy.get("tbody tr").should("have.length", 1);
+    cy.get("button").contains("Clear").click();
+    cy.get("tbody tr").should("have.length", 3);
+    // click twice for descending order
+    cy.get("thead th").contains("Operator Legal Name").click();
+    cy.get("thead th").contains("Operator Legal Name").click();
+    cy.contains("third operator legal name");
+  });
+});
diff --git a/app/tests/unit/pages/operators.test.tsx b/app/tests/unit/pages/operators.test.tsx
index 7ed11382ae..b6196df5f9 100644
--- a/app/tests/unit/pages/operators.test.tsx
+++ b/app/tests/unit/pages/operators.test.tsx
@@ -37,7 +37,7 @@ const defaultMockResolver = {
           { node: { id: "1", legalName: "Operator 1" } },
           { node: { id: "2", legalName: "Operator 2" } },
         ],
-      }
+      },
     };
   },
 };