Error: Trying to access the 'keyboard' property of an undefined object

Question

Error: Trying to access the 'keyboard' property of an undefined object

I am encountering an error message

'Cannot read property 'keyboard' of undefined'

and I'm not sure how to fix it. I just want to check if the keyboard is visible on the screen, but this specific line of code seems to be causing the issue.

wait t.expect(this.searchKeyboard.keyboard.visible).ok({ timeout: 3000 });

Code:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel;

  constructor() {
    super();
  }

  async enterSearchKeyword(keyword: string) {
    await t.expect(this.searchKeyboard.keyboard.visible).ok({ timeout: 3000 });
  }
}

...

export class SearchKeyboardModel {
  keyboard: Selector;

  constructor() {
    this.keyboard = getByTestId('qa-keypad-wrapper');
  }

...

javascript typescript

Answer 1

Answer №1

Explaining the syntax:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel;

This code snippet defines a property named searchKeyboard on instances of the class. It specifies that only values with the type "SearchKeyboardModel" can be assigned to it.

However, the property is not assigned a value initially, so its default value is undefined.

When attempting to access it later:

this.searchKeyboard.keyboard.visible

The error occurs because this.searchKeyboard remains undefined, hence the attempt to read keyboard from an undefined value.

Prior to accessing the value, you must assign a value to it.

You could achieve this inline for shared values among all instances of the class:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel = new SearchKeyboardModel();

Alternatively, in the constructor for unique values for each instance:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel;

  constructor() {
    super();
    this.searchKeyboard = new SearchKeyboardModel();
  }

Note: The specifics of initializing an instance of SearchKeyboardModel are unknown.

Answer 2

Explaining the syntax:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel;

This code snippet defines a property named searchKeyboard on instances of the class. It specifies that only values with the type "SearchKeyboardModel" can be assigned to it.

However, the property is not assigned a value initially, so its default value is undefined.

When attempting to access it later:

this.searchKeyboard.keyboard.visible

The error occurs because this.searchKeyboard remains undefined, hence the attempt to read keyboard from an undefined value.

Prior to accessing the value, you must assign a value to it.

You could achieve this inline for shared values among all instances of the class:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel = new SearchKeyboardModel();

Alternatively, in the constructor for unique values for each instance:

class SearchPage extends BasePage {
  searchKeyboard: SearchKeyboardModel;

  constructor() {
    super();
    this.searchKeyboard = new SearchKeyboardModel();
  }

Note: The specifics of initializing an instance of SearchKeyboardModel are unknown.

Error: Trying to access the 'keyboard' property of an undefined object

Answer №1

Similar questions

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

React's .map is not compatible with arrays of objects

gulp-webpack is unable to locate node packages

The error message "Property <property> is not recognized on the type 'jQueryStatic<HTMLElement>'" is indicating an issue with accessing a specific property within the TypeScript codebase that utilizes Angular CLI, NPM,

Nothing remains after the fall: coding void

Unable to stop at breakpoints using Visual Studio Code while starting with nodemon

The IntroJs step is only partially visible on the screen

Exploring the world of JSON on the internet

Tips for making sure the Button component in material-ui consistently gives the same ID value for onClick events

Exploring the Factory Design Pattern Together with Dependency Injection in Angular

Avoid triggering the onClick event on specific elements in React by utilizing event delegation or conditional rendering

What sets apart the JavaScript console from simply right-clicking the browser and opting for the inspect option?

What is the best way to iterate through an array of images and upload them individually, ensuring that they do not have duplicate names

How to dynamically load a file based on the chosen option value in React

Tips for invoking TypeScript code from Rust WebAssembly

Tips for building and implementing Angular URL Parameters for URLs in the form: "component/#/?id=..."

Retrieve the image description using the file_picker_callback and image uploader in Tinymce

Access specific files within a workspace in VS Code with read-only permissions

Utilizing Ajax and Jquery/JavaScript to dynamically generate HTML elements when data surpasses zero

After refreshing the page, RouterLinkActive in Angular 6 fails to work