cypress_bdd_fw.ts

// test file
import { given } from 'cypress-bdd';
import { TwitterPage } from './TwitterPage';

describe("Some test suite", () => {
  it("some test", () => {
    given(TwitterPage, twitterPage => twitterPage.open())
      .when(twitterPage =>
        twitterPage
          .tweetNewMessage("some message")
          .then.refreshTweets()
      )
      .then(twitterPage => 
        twitterPage.getComponent().$tweets.should("contain", "some message"));
  });
});

// Page objects looks like this:

// file TweetDialog.ts
import { FindBy, BaseComponent, CypressElement } from 'cypress-bdd';

class TweetDialog extends BaseComponent {
  @FindBy(".input")
  $textInput!: CypressElement;

  @FindBy(".btn")
  $submitBtn!: CypressElement;

  fillInput(text: string) {
    this.$textInput.type(text);
  }

  submit() {
    this.$submitBtn.click();
  }
}

// file TwitterPage.ts
import { FindBy, BasePage, Component, CypressElement } from 'cypress-bdd';
import { TweetDialog } from './TweetDialog';

class TwitterPage extends BasePage {
  url = "twitter.com";

  @FindBy(".new-tweet-btn")
  $newTweetBtn!: CypressElement;

  @FindBy(".refresh-btn")
  $refreshTweetsBtn!: CypressElement;

  @FindBy(".tweets")
  $tweets!: CypressElement;

  @Component(TweetDialog)
  tweetDialogComponent!: TweetDialog;

  tweetNewMessage = action(this, (message: string) => {
    this.tweetDialogComponent.fillInput(message);
    this.tweetDialogComponent.submit();
  });

  refreshTweets = action(this, () => {
    this.$refreshTweetsBtn.click();
  });
}