diff --git a/samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx b/samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx
index 98713163..d004a069 100644
--- a/samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx
+++ b/samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx
@@ -27,6 +27,7 @@ function SampleGenericContentSidekickPlugin(
         id: GENERIC_CONTENT_BADGE_ID,
         name: 'Generic Content 1',
         section: 'Section 1',
+        dataTest: 'section-1-generic-content-sidekick-abc',
         buttonIcon: 'video',
         open: false,
         contentFunction: (element: HTMLElement) => {
diff --git a/src/extensible-areas/actions-bar-item/types.ts b/src/extensible-areas/actions-bar-item/types.ts
index 07b63888..6c8746f9 100644
--- a/src/extensible-areas/actions-bar-item/types.ts
+++ b/src/extensible-areas/actions-bar-item/types.ts
@@ -5,7 +5,7 @@ import { ActionsBarItemType, ActionsBarPosition } from './enums';
 /**
  * Interface for the generic Actions bar item. (`position` is mandatory)
  */
-export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor{
+export interface ActionsBarInterface extends PluginProvidedUiItemDescriptor {
   position: ActionsBarPosition;
 }
 
diff --git a/src/extensible-areas/base.ts b/src/extensible-areas/base.ts
index 91d637dc..e09df377 100644
--- a/src/extensible-areas/base.ts
+++ b/src/extensible-areas/base.ts
@@ -27,4 +27,5 @@ export interface PluginProvidedUiItemDescriptor {
   id: string;
   type: PluginProvidedUiItemType;
   setItemId: (id: string) => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/floating-window/component.ts b/src/extensible-areas/floating-window/component.ts
index 6b86e76b..1215f3c0 100644
--- a/src/extensible-areas/floating-window/component.ts
+++ b/src/extensible-areas/floating-window/component.ts
@@ -19,6 +19,8 @@ export class FloatingWindow implements FloatingWindowInterface {
 
   boxShadow: string;
 
+  dataTest?: string;
+
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
   /**
@@ -45,6 +47,7 @@ export class FloatingWindow implements FloatingWindowInterface {
     backgroundColor,
     boxShadow,
     contentFunction,
+    dataTest,
   }: FloatingWindowProps) {
     if (id) {
       this.id = id;
@@ -52,6 +55,7 @@ export class FloatingWindow implements FloatingWindowInterface {
     this.top = top;
     this.left = left;
     this.movable = movable;
+    this.dataTest = dataTest;
     this.backgroundColor = backgroundColor;
     this.boxShadow = boxShadow;
 
diff --git a/src/extensible-areas/floating-window/types.ts b/src/extensible-areas/floating-window/types.ts
index ecb56732..453dbe20 100644
--- a/src/extensible-areas/floating-window/types.ts
+++ b/src/extensible-areas/floating-window/types.ts
@@ -11,6 +11,7 @@ export interface FloatingWindowProps {
   movable: boolean;
   backgroundColor: string;
   boxShadow: string;
+  dataTest?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 }
 
diff --git a/src/extensible-areas/generic-content-item/component.ts b/src/extensible-areas/generic-content-item/component.ts
index 12170d36..9e0413dd 100644
--- a/src/extensible-areas/generic-content-item/component.ts
+++ b/src/extensible-areas/generic-content-item/component.ts
@@ -11,22 +11,26 @@ export class GenericContentMainArea implements GenericContentInterface {
 
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
+  dataTest: string;
+
   /**
    * Returns an object that when used in the setter as a generic content will be rendered
    * over the meeting main presentation.
    *
    * @param contentFunction - function that gives the html element to render the content of
    * the generic component
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, contentFunction,
+    id, contentFunction, dataTest = '',
   }: GenericContentMainAreaProps) {
     if (id) {
       this.id = id;
     }
     this.contentFunction = contentFunction;
+    this.dataTest = dataTest;
     this.type = GenericContentType.MAIN_AREA;
   }
 
@@ -48,6 +52,8 @@ export class GenericContentSidekickArea implements GenericContentInterface {
 
   open: boolean = false;
 
+  dataTest: string;
+
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
 
   /**
@@ -63,11 +69,12 @@ export class GenericContentSidekickArea implements GenericContentInterface {
    *  displayed
    * @param buttonIcon - the icon of the associated sidebar navigation button
    * @param open - boolean value to decide wether to start open
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, contentFunction, name, section, buttonIcon, open,
+    id, contentFunction, name, section, buttonIcon, open, dataTest = '',
   }: GenericContentSidekickAreaProps) {
     if (id) {
       this.id = id;
@@ -76,6 +83,7 @@ export class GenericContentSidekickArea implements GenericContentInterface {
     this.name = name;
     this.section = section;
     this.buttonIcon = buttonIcon;
+    this.dataTest = dataTest;
     this.type = GenericContentType.SIDEKICK_AREA;
     this.open = open;
   }
diff --git a/src/extensible-areas/generic-content-item/types.ts b/src/extensible-areas/generic-content-item/types.ts
index 46c05065..55d026a5 100644
--- a/src/extensible-areas/generic-content-item/types.ts
+++ b/src/extensible-areas/generic-content-item/types.ts
@@ -7,6 +7,7 @@ export interface GenericContentInterface extends PluginProvidedUiItemDescriptor
 export interface GenericContentMainAreaProps {
   id?: string;
   contentFunction: (element: HTMLElement) => ReactDOM.Root;
+  dataTest?: string;
 }
 
 export interface GenericContentSidekickAreaProps {
@@ -16,4 +17,5 @@ export interface GenericContentSidekickAreaProps {
   section: string;
   buttonIcon: string;
   open: boolean;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/nav-bar-item/component.ts b/src/extensible-areas/nav-bar-item/component.ts
index e769f320..29c03dfc 100644
--- a/src/extensible-areas/nav-bar-item/component.ts
+++ b/src/extensible-areas/nav-bar-item/component.ts
@@ -19,6 +19,8 @@ export class NavBarButton implements NavBarInterface {
 
   disabled: boolean;
 
+  dataTest: string;
+
   position: NavBarItemPosition;
 
   hasSeparator: boolean;
@@ -38,11 +40,12 @@ export class NavBarButton implements NavBarInterface {
    * @param hasSeparator - boolean indicating whether the navigation bar button has separator
    * (vertical bar)
    * @param disabled - if true, the navigation bar button will not be clickable
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
     position = NavBarItemPosition.RIGHT, hasSeparator = true,
   }: NavBarButtonProps) {
     if (id) {
@@ -52,6 +55,7 @@ export class NavBarButton implements NavBarInterface {
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = NavBarItemType.BUTTON;
     this.hasSeparator = hasSeparator;
@@ -70,6 +74,8 @@ export class NavBarInfo implements NavBarInterface {
 
   label: string;
 
+  dataTest: string;
+
   hasSeparator: boolean;
 
   position: NavBarItemPosition;
@@ -83,17 +89,19 @@ export class NavBarInfo implements NavBarInterface {
    * See {@link NavBarItemPosition}
    * @param hasSeparator - boolean indicating whether the navigation bar information has separator
    * (vertical bar)
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
     id, label = '', position = NavBarItemPosition.RIGHT,
-    hasSeparator = true,
+    hasSeparator = true, dataTest = '',
   }: NavBarInfoProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
+    this.dataTest = dataTest;
     this.type = NavBarItemType.INFO;
     this.position = position;
     this.hasSeparator = hasSeparator;
diff --git a/src/extensible-areas/nav-bar-item/types.ts b/src/extensible-areas/nav-bar-item/types.ts
index 4952503b..737042f2 100644
--- a/src/extensible-areas/nav-bar-item/types.ts
+++ b/src/extensible-areas/nav-bar-item/types.ts
@@ -15,6 +15,7 @@ export interface NavBarButtonProps {
   hasSeparator: boolean;
   position: NavBarItemPosition;
   onClick: () => void;
+  dataTest?: string;
 }
 
 export interface NavBarInfoProps {
@@ -22,4 +23,5 @@ export interface NavBarInfoProps {
   label: string;
   hasSeparator: boolean;
   position: NavBarItemPosition;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/options-dropdown-item/component.ts b/src/extensible-areas/options-dropdown-item/component.ts
index 20b0422c..08fe90c6 100644
--- a/src/extensible-areas/options-dropdown-item/component.ts
+++ b/src/extensible-areas/options-dropdown-item/component.ts
@@ -14,6 +14,8 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
 
   icon: string;
 
+  dataTest: string;
+
   onClick: () => void;
 
   /**
@@ -22,18 +24,20 @@ export class OptionsDropdownOption implements OptionsDropdownInterface {
    *
    * @param label - label to be displayed in the options dropdown option.
    * @param icon - icon to be displayed in the options dropdown. It goes in the left side of it.
+   * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the option.
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => {},
   }: OptionsDropdownOptionProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
     this.icon = icon;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = OptionsDropdownItemType.OPTION;
   }
@@ -48,13 +52,18 @@ export class OptionsDropdownSeparator implements OptionsDropdownInterface {
 
   type: OptionsDropdownItemType;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the Navigation Bar. In this case,
    * a separator.
    *
+   * @param dataTest - string attribute to be used for testing
+   *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
-  constructor() {
+  constructor({ dataTest = '' } = {}) {
+    this.dataTest = dataTest;
     this.type = OptionsDropdownItemType.SEPARATOR;
   }
 
diff --git a/src/extensible-areas/options-dropdown-item/types.ts b/src/extensible-areas/options-dropdown-item/types.ts
index d4d8ffd5..c08bd3df 100644
--- a/src/extensible-areas/options-dropdown-item/types.ts
+++ b/src/extensible-areas/options-dropdown-item/types.ts
@@ -15,4 +15,5 @@ export interface OptionsDropdownOptionProps {
   label: string;
   icon: string;
   onClick: () => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/presentation-dropdown-item/component.ts b/src/extensible-areas/presentation-dropdown-item/component.ts
index 210c98e4..9ed50230 100644
--- a/src/extensible-areas/presentation-dropdown-item/component.ts
+++ b/src/extensible-areas/presentation-dropdown-item/component.ts
@@ -14,6 +14,8 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
 
   icon: string;
 
+  dataTest: string;
+
   onClick: () => void;
 
   /**
@@ -23,18 +25,20 @@ export class PresentationDropdownOption implements PresentationDropdownInterface
    * @param label - label to be displayed in the presentation dropdown option.
    * @param icon - icon to be displayed in the presentation dropdown.
    * It goes in the left side of it.
+   * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the option.
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => {},
   }: PresentationDropdownOptionProps) {
     if (id) {
       this.id = id;
     }
     this.label = label;
     this.icon = icon;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = PresentationDropdownItemType.OPTION;
   }
@@ -49,13 +53,18 @@ export class PresentationDropdownSeparator implements PresentationDropdownInterf
 
   type: PresentationDropdownItemType;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the Presentation Dropdown. In this case,
    * a separator (horizontal thin black line).
-
+   *
+   * @param dataTest - string attribute to be used for testing
+   *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
-  constructor() {
+  constructor({ dataTest = '' } = {}) {
+    this.dataTest = dataTest;
     this.type = PresentationDropdownItemType.SEPARATOR;
   }
 
diff --git a/src/extensible-areas/presentation-dropdown-item/types.ts b/src/extensible-areas/presentation-dropdown-item/types.ts
index 1553528b..a5363a3c 100644
--- a/src/extensible-areas/presentation-dropdown-item/types.ts
+++ b/src/extensible-areas/presentation-dropdown-item/types.ts
@@ -15,4 +15,5 @@ export interface PresentationDropdownOptionProps {
   label: string;
   icon: string;
   onClick: () => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/screenshare-helper-item/component.ts b/src/extensible-areas/screenshare-helper-item/component.ts
index 01255aca..93bc9f3f 100644
--- a/src/extensible-areas/screenshare-helper-item/component.ts
+++ b/src/extensible-areas/screenshare-helper-item/component.ts
@@ -20,6 +20,8 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
 
   disabled: boolean;
 
+  dataTest: string;
+
   position: ScreenshareHelperItemPosition;
 
   onClick: (args: ScreenshareHelperButtonOnclickCallback) => void;
@@ -37,11 +39,12 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
    * @param hasSeparator - boolean indicating whether the screenshare helper button has separator
    * (vertical bar)
    * @param disabled - if true, the screenshare helper button will not be clickable
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
     position = ScreenshareHelperItemPosition.TOP_RIGHT,
   }: ScreenshareHelperButtonProps) {
     if (id) {
@@ -51,6 +54,7 @@ export class ScreenshareHelperButton implements ScreenshareHelperButtonInterface
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = ScreenshareHelperItemType.BUTTON;
     this.position = position;
diff --git a/src/extensible-areas/screenshare-helper-item/types.ts b/src/extensible-areas/screenshare-helper-item/types.ts
index 8f907e5c..6448c37f 100644
--- a/src/extensible-areas/screenshare-helper-item/types.ts
+++ b/src/extensible-areas/screenshare-helper-item/types.ts
@@ -32,4 +32,5 @@ export interface ScreenshareHelperButtonProps {
   hasSeparator: boolean;
   position: ScreenshareHelperItemPosition;
   onClick: (args: ScreenshareHelperButtonOnclickCallback) => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/user-camera-dropdown-item/component.ts b/src/extensible-areas/user-camera-dropdown-item/component.ts
index 62aab540..500ead9e 100644
--- a/src/extensible-areas/user-camera-dropdown-item/component.ts
+++ b/src/extensible-areas/user-camera-dropdown-item/component.ts
@@ -17,6 +17,8 @@ export class UserCameraDropdownOption implements UserCameraDropdownInterface {
 
   icon: string;
 
+  dataTest: string;
+
   onClick: (args: OnclickFunctionCallbackArguments) => void;
 
   displayFunction?: (args: UserCameraDropdownCallbackFunctionsArguments) => boolean;
@@ -27,12 +29,13 @@ export class UserCameraDropdownOption implements UserCameraDropdownInterface {
    *
    * @param label - label to be displayed in the option.
    * @param icon - icon to be displayed in the option. Left side of it.
+   * @param dataTest - string attribute to be used for testing
    * @param onClick - function to be called when clicking the button
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    id, label = '', icon = '', onClick = () => {},
+    id, label = '', icon = '', dataTest = '', onClick = () => {},
     displayFunction = () => true,
   }: UserCameraDropdownOptionProps) {
     if (id) {
@@ -41,6 +44,7 @@ export class UserCameraDropdownOption implements UserCameraDropdownInterface {
     this.displayFunction = displayFunction;
     this.label = label;
     this.icon = icon;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = UserCameraDropdownItemType.OPTION;
   }
@@ -55,18 +59,23 @@ export class UserCameraDropdownSeparator implements UserCameraDropdownInterface
 
   type: UserCameraDropdownItemType;
 
+  dataTest: string;
+
   displayFunction?: (args: UserCameraDropdownCallbackFunctionsArguments) => boolean;
 
   /**
    * Returns object to be used in the setter for User Camera Dropdown. In this case
    * a separator.
    *
+   * @param dataTest - string attribute to be used for testing
+   *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
    */
   constructor({
-    displayFunction,
+    displayFunction, dataTest = '',
   }: UserCameraDropdownSeparatorProps = { displayFunction: () => true }) {
     this.displayFunction = displayFunction;
+    this.dataTest = dataTest;
     this.type = UserCameraDropdownItemType.SEPARATOR;
   }
 
diff --git a/src/extensible-areas/user-camera-dropdown-item/types.ts b/src/extensible-areas/user-camera-dropdown-item/types.ts
index 6b9e3452..61184b3e 100644
--- a/src/extensible-areas/user-camera-dropdown-item/types.ts
+++ b/src/extensible-areas/user-camera-dropdown-item/types.ts
@@ -22,6 +22,7 @@ export interface UserCameraDropdownInterface extends PluginProvidedUiItemDescrip
 
 export interface UserCameraDropdownSeparatorProps {
   displayFunction?: (args: UserCameraDropdownCallbackFunctionsArguments) => boolean;
+  dataTest?: string;
 }
 
 export interface UserCameraDropdownOptionProps {
@@ -30,4 +31,5 @@ export interface UserCameraDropdownOptionProps {
   icon: string;
   onClick: (args: OnclickFunctionCallbackArguments) => void;
   displayFunction?: (args: UserCameraDropdownCallbackFunctionsArguments) => boolean;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/user-camera-helper-item/component.ts b/src/extensible-areas/user-camera-helper-item/component.ts
index a28d91ee..a5c9cbcf 100644
--- a/src/extensible-areas/user-camera-helper-item/component.ts
+++ b/src/extensible-areas/user-camera-helper-item/component.ts
@@ -23,6 +23,8 @@ export class UserCameraHelperButton implements UserCameraHelperButtonInterface {
 
   disabled: boolean;
 
+  dataTest: string;
+
   position: UserCameraHelperItemPosition;
 
   onClick: (args: UserCameraHelperButtonOnclickCallback) => void;
@@ -40,11 +42,12 @@ export class UserCameraHelperButton implements UserCameraHelperButtonInterface {
    * @param position - position to place the userCamera helper button.
    * See {@link UserCameraHelperItemPosition}
    * @param disabled - if true, the userCamera helper button will not be clickable
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', disabled = true, onClick = () => {},
+    id, label = '', icon = '', tooltip = '', disabled = true, dataTest = '', onClick = () => {},
     position = UserCameraHelperItemPosition.TOP_RIGHT, displayFunction,
   }: UserCameraHelperButtonProps) {
     if (id) {
@@ -54,6 +57,7 @@ export class UserCameraHelperButton implements UserCameraHelperButtonInterface {
     this.icon = icon;
     this.tooltip = tooltip;
     this.disabled = disabled;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.displayFunction = displayFunction;
     this.type = UserCameraHelperItemType.BUTTON;
diff --git a/src/extensible-areas/user-camera-helper-item/types.ts b/src/extensible-areas/user-camera-helper-item/types.ts
index 5a5eb5fc..6474d741 100644
--- a/src/extensible-areas/user-camera-helper-item/types.ts
+++ b/src/extensible-areas/user-camera-helper-item/types.ts
@@ -41,4 +41,5 @@ export interface UserCameraHelperButtonProps {
   displayFunction?: (args: UserCameraHelperCallbackFunctionArguments) => boolean;
   position: UserCameraHelperItemPosition;
   onClick: (args: UserCameraHelperButtonOnclickCallback) => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/user-list-dropdown-item/component.ts b/src/extensible-areas/user-list-dropdown-item/component.ts
index a217db16..3dd4255f 100644
--- a/src/extensible-areas/user-list-dropdown-item/component.ts
+++ b/src/extensible-areas/user-list-dropdown-item/component.ts
@@ -25,6 +25,8 @@ export class UserListDropdownOption implements UserListDropdownInterface {
 
   allowed: boolean;
 
+  dataTest: string;
+
   onClick: () => void;
 
   /**
@@ -38,11 +40,12 @@ export class UserListDropdownOption implements UserListDropdownInterface {
    * @param allowed - if false, the use list dropdown  will not appear in the dropdown.
    * @param userId - the userId in which this dropdown option will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    label = '', icon = '', tooltip = '', allowed = true, onClick = () => {},
+    label = '', icon = '', tooltip = '', allowed = true, dataTest = '', onClick = () => {},
     userId = '',
   }: UserListDropdownOptionProps) {
     this.userId = userId;
@@ -50,6 +53,7 @@ export class UserListDropdownOption implements UserListDropdownInterface {
     this.icon = icon;
     this.tooltip = tooltip;
     this.allowed = allowed;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = UserListDropdownItemType.OPTION;
   }
@@ -68,18 +72,22 @@ export class UserListDropdownSeparator implements UserListDropdownInterface {
 
   type: UserListDropdownItemType;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the User List Dropdown. In this case,
    * a separator.
    *
    * @param userId - the userId in which this dropdown separator will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
-  constructor({ userId = '', position = UserListDropdownSeparatorPosition.AFTER }: UserListDropdownSeparatorProps) {
+  constructor({ userId = '', position = UserListDropdownSeparatorPosition.AFTER, dataTest = '' }: UserListDropdownSeparatorProps) {
     this.userId = userId;
     this.position = position;
+    this.dataTest = dataTest;
     this.type = UserListDropdownItemType.SEPARATOR;
   }
 
@@ -105,6 +113,8 @@ export class UserListDropdownFixedContentInformation implements UserListDropdown
 
   allowed: boolean;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the User List Dropdown. In this case,
    * a button.
@@ -118,12 +128,13 @@ export class UserListDropdownFixedContentInformation implements UserListDropdown
    * @param textColor - Color that the text will have.
    * @param userId - the userId in which this dropdown information will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
     id, label = '', icon = '', iconRight = '', allowed = true,
-    userId = '', textColor = '',
+    userId = '', textColor = '', dataTest = '',
   }: UserListDropdownFixedContentInformationProps) {
     if (id) {
       this.id = id;
@@ -134,6 +145,7 @@ export class UserListDropdownFixedContentInformation implements UserListDropdown
     this.iconRight = iconRight;
     this.textColor = textColor;
     this.allowed = allowed;
+    this.dataTest = dataTest;
     this.type = UserListDropdownItemType.FIXED_CONTENT_INFORMATION;
   }
 
@@ -152,6 +164,8 @@ implements UserListDropdownInterface {
 
   type: UserListDropdownItemType;
 
+  dataTest: string;
+
   contentFunction: (element: HTMLElement) => void;
 
   /**
@@ -167,18 +181,20 @@ implements UserListDropdownInterface {
    * @param textColor - Color that the text will have.
    * @param userId - the userId in which this dropdown information will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
     id, contentFunction, allowed = true,
-    userId = '',
+    userId = '', dataTest = '',
   }: UserListDropdownGenericContentInformationProps) {
     if (id) {
       this.id = id;
     }
     this.userId = userId;
     this.allowed = allowed;
+    this.dataTest = dataTest;
     this.contentFunction = contentFunction;
     this.type = UserListDropdownItemType.GENERIC_CONTENT_INFORMATION;
   }
@@ -199,6 +215,8 @@ export class UserListDropdownTitleAction implements UserListDropdownInterface {
 
   tooltip: string;
 
+  dataTest: string;
+
   onClick: (args: UserListDropdownTitleActionOnClickArguments) => void;
 
   /**
@@ -211,11 +229,12 @@ export class UserListDropdownTitleAction implements UserListDropdownInterface {
    * It goes on the left side of it.
    * @param userId - the userId in which this dropdown title action will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, icon = '', userId = '', onClick, tooltip,
+    id, icon = '', userId = '', onClick, tooltip, dataTest = '',
   }: UserListDropdownTitleActionProps) {
     if (id) {
       this.id = id;
@@ -223,6 +242,7 @@ export class UserListDropdownTitleAction implements UserListDropdownInterface {
     this.userId = userId;
     this.icon = icon;
     this.tooltip = tooltip;
+    this.dataTest = dataTest;
     this.onClick = onClick;
     this.type = UserListDropdownItemType.TITLE_ACTION;
   }
diff --git a/src/extensible-areas/user-list-dropdown-item/types.ts b/src/extensible-areas/user-list-dropdown-item/types.ts
index 55ebaf72..e8ded734 100644
--- a/src/extensible-areas/user-list-dropdown-item/types.ts
+++ b/src/extensible-areas/user-list-dropdown-item/types.ts
@@ -19,11 +19,13 @@ export interface UserListDropdownOptionProps {
   allowed: boolean;
   userId: string;
   onClick: () => void;
+  dataTest?: string;
 }
 
 export interface UserListDropdownSeparatorProps {
   userId: string;
   position?: UserListDropdownSeparatorPosition;
+  dataTest?: string;
 }
 
 export interface UserListDropdownGenericContentInformationProps {
@@ -31,6 +33,7 @@ export interface UserListDropdownGenericContentInformationProps {
   contentFunction: (element: HTMLElement) => void;
   allowed: boolean;
   userId: string;
+  dataTest?: string;
 }
 
 export interface UserListDropdownFixedContentInformationProps {
@@ -41,6 +44,7 @@ export interface UserListDropdownFixedContentInformationProps {
   allowed: boolean;
   userId: string;
   textColor: string;
+  dataTest?: string;
 }
 
 export interface UserListDropdownTitleActionOnClickArguments {
@@ -53,4 +57,5 @@ export interface UserListDropdownTitleActionProps {
   icon: string;
   userId: string;
   onClick: (args: UserListDropdownTitleActionOnClickArguments) => void;
+  dataTest?: string;
 }
diff --git a/src/extensible-areas/user-list-item-additional-information/component.ts b/src/extensible-areas/user-list-item-additional-information/component.ts
index 22ad7f1d..c831aad3 100644
--- a/src/extensible-areas/user-list-item-additional-information/component.ts
+++ b/src/extensible-areas/user-list-item-additional-information/component.ts
@@ -15,6 +15,8 @@ export class UserListItemIcon implements UserListItemAdditionalInformationInterf
 
   icon: string;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the User List Item Additional information Item.
    * In this case, a icon.
@@ -23,17 +25,19 @@ export class UserListItemIcon implements UserListItemAdditionalInformationInterf
    * It goes on the left side of it.
    * @param userId - the userId in which this information will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, icon = '', userId = '',
+    id, icon = '', userId = '', dataTest = '',
   }: UserListItemIconProps) {
     if (id) {
       this.id = id;
     }
     this.icon = icon;
     this.userId = userId;
+    this.dataTest = dataTest;
     this.type = UserListItemAdditionalInformationType.ICON;
   }
 
@@ -53,6 +57,8 @@ export class UserListItemLabel implements UserListItemAdditionalInformationInter
 
   label: string;
 
+  dataTest: string;
+
   /**
    * Returns object to be used in the setter for the User List Item Additional information Item.
    * In this case, a label (Information).
@@ -62,11 +68,12 @@ export class UserListItemLabel implements UserListItemAdditionalInformationInter
    * It goes on the left side of it.
    * @param userId - the userId in which this information will appear when the user
    * list item is clicked.
+   * @param dataTest - string attribute to be used for testing
    *
    * @returns Object that will be interpreted by the core of Bigbluebutton (HTML5).
    */
   constructor({
-    id, icon = '', userId = '', label = '',
+    id, icon = '', userId = '', label = '', dataTest = '',
   }: UserListItemLabelProps) {
     if (id) {
       this.id = id;
@@ -74,6 +81,7 @@ export class UserListItemLabel implements UserListItemAdditionalInformationInter
     this.icon = icon;
     this.label = label;
     this.userId = userId;
+    this.dataTest = dataTest;
     this.type = UserListItemAdditionalInformationType.LABEL;
   }
 
diff --git a/src/extensible-areas/user-list-item-additional-information/types.ts b/src/extensible-areas/user-list-item-additional-information/types.ts
index f4ce96c9..73b4ca8b 100644
--- a/src/extensible-areas/user-list-item-additional-information/types.ts
+++ b/src/extensible-areas/user-list-item-additional-information/types.ts
@@ -15,6 +15,7 @@ export interface UserListItemIconProps {
   id?: string;
   userId: string;
   icon: string;
+  dataTest?: string;
 }
 
 export interface UserListItemLabelProps {
@@ -22,4 +23,5 @@ export interface UserListItemLabelProps {
   userId: string;
   icon: string;
   label: string;
+  dataTest?: string;
 }