Cypress run test on condition

Question

I'm not clear on how to run tests only if an async condition is satisfied: if an element is present on the page.

It'd be something like that, which obviously doesn't work. I can see the alert "enabled", but the nested test "Run proper tests" won't run. What is the right way to do this? Of course, this is simplified, there are a lot of more tests, not just 1.

context("table", () => {

    it("Check availability", () => {
        cy.get("div.table").then($div => {
            if (!Cypress.$(".header[title]", $div).length) {
                alert("not enabled");
            } else {
                alert("enabled");
                it("Run proper tests", () => {...});
            }
        });
    });
});

Answer 1

I would make a new instance and use a variable

context("table", () => {

let result

    it("Check availability", () => {
        cy.get("div.table").then($div => {
            if (!Cypress.$(".header[title]", $div).length) {
                alert("not enabled");
                result='fail'
            } 
            else {
                alert("enabled");
            }
     })

     it("Run proper tests", () => {
          if (result === 'fail') {
          console.log('not enabled')
          }
          else {
           Run proper test
               }
     })
})

Answer 2

You could try Mocha's pending tests feature via this.skip() :

context("table", () => {

    it("Run proper tests", () => {
        cy.get("div.table").then(function($div) {
            if (!Cypress.$(".header[title]", $div).length) {
                this.skip()
            } else {
                // Run proper test
            }
        });
    });
});

This is how a skipped test is displayed in the Cypress runner: