Page not refreshed after POST

[Vrezerino]

So my project has one post form which appears on both /[board] and /board/[post]. The former is for thread creation and latter for replying. Testing the former always yields success while reply tests fails 95% of the time, locally and in CI. Cypress clear functions, window refreshes, forcing DOM update with injections, none of those work consistently if at all. Any ideas? Those Cypress env variables are not the problem, they're consistent.

describe('PostForm', () => {
  let rand: string;

  before(() => {
    rand = `${Math.floor(Math.random() * 100000)}`;
    Cypress.env('testRand', rand);
    Cypress.env('firstPostWasThrottled', false);
  });

  // Works almost always
  it('submits new thread and it can be seen in catalogue', () => {
    const rand = Cypress.env('testRand');

    cy.intercept('POST', '/api/posts').as('postFormRequest');
    cy.visit('http://localhost:3000/dashboard/random');

    cy.contains('Post new thread');
    cy.get('[data-testid="postform-textarea"]').type(`[TEST]: Cypress posted this thread ${rand}`);
    cy.get('#postBtn').click();

    cy.wait('@postFormRequest').its('response.statusCode').should('eq', 201);
    cy.contains(`[TEST]: Cypress posted this thread ${rand}`).should('exist');
  });

  // Works almost always since we're only intercepting an HTTP response
  it('post throttling (anti-spam) works', () => {
    const rand = Cypress.env('testRand');
    cy.intercept('POST', '/api/posts').as('postFormRequest');
    cy.visit('http://localhost:3000/dashboard/random');

    cy.contains(`[TEST]: Cypress posted this thread ${rand}`).click();
    cy.contains('Reply', { timeout: 3000 }).should('exist');
    cy.get('[data-testid="postform-textarea"]').type(`[TEST]: Cypress attempted to reply ${rand}`);
    cy.get('#postBtn').click();

    cy.wait('@postFormRequest').then((interception) => {
      const status = interception.response?.statusCode;
      if (status === 429) {
        Cypress.env('firstPostWasThrottled', true);
      } else if (status === 201) {
        Cypress.env('firstPostWasThrottled', false);
      } else {
        throw new Error(`Unexpected status code: ${status}`);
      }
    });

    cy.wait(2000);
  });
});

describe('Reply', () => {
  // Could be anything, a simple cy.refresh() or something but works just as badly
  const forceDOMUpdate = () => {
    cy.window().then((win) => {
      const ghost = document.createElement('div');
      ghost.id = 'ghost-nudge';
      ghost.innerText = Date.now().toString();
      win.document.body.appendChild(ghost);
      setTimeout(() => ghost.remove(), 100);
    });
  };

  // Almost never works
  it('to OP works', () => {
    const rand = Cypress.env('testRand');
    const wasThrottled = Cypress.env('firstPostWasThrottled');

    cy.intercept('POST', '/api/posts').as('postFormRequest');
    cy.visit('http://localhost:3000/dashboard/random');

    cy.contains(`[TEST]: Cypress posted this thread ${rand}`).click();
    cy.contains('Reply', { timeout: 3000 }).should('exist');
    cy.get('[data-testid="postform-textarea"]').type(`[TEST]: Cypress posted this reply ${rand}`);
    cy.get('#postBtn').click();
    cy.wait('@postFormRequest').its('response.statusCode').should('eq', 201);

    forceDOMUpdate();

    cy.get('[data-testid="post-content"]').should('have.length.greaterThan', 1)
      .eq(wasThrottled ? 1 : 2)
      .should('contain.text', `[TEST]: Cypress posted this reply ${rand}`);

    cy.wait(2000);
  });

  // More reply tests that fail

In postForm I have router.refresh() on status code being 201 (Successful Creation).

spec.cy.ts.mp4

[Vrezerino]

By the way there is a tendency for most all of the tests to work at first run, but only after re-running Cypress after some time, maybe ten minutes.

Edit: I ditched Cypress for Playwright which is much more reliable, but will keep this discussion open for others.