diff --git a/.github/workflows/openvidu-components-angular-E2E.yml b/.github/workflows/openvidu-components-angular-E2E.yml
index 78f536bc..7f24cd4e 100644
--- a/.github/workflows/openvidu-components-angular-E2E.yml
+++ b/.github/workflows/openvidu-components-angular-E2E.yml
@@ -110,3 +110,34 @@ jobs:
       run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
     - name: Run Webcomponent E2E
       run:  npm run webcomponent:e2e-ci --prefix openvidu-components-angular
+
+  webcomponent_e2e_pro:
+    needs: test_setup
+    name: Webcomponent E2E PRO tests
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: '16'
+    - uses: actions/download-artifact@v3
+      with:
+        name: openvidu-browser
+        path: openvidu-components-angular
+    - name: Run Browserless Chrome
+      run: docker run -d -p 3000:3000 --network host browserless/chrome:1.53-chrome-stable
+    - name: Install openvidu-browser and dependencies
+      run: |
+        cd openvidu-components-angular
+        npm install openvidu-browser-*.tgz
+    - name: Build openvidu-angular
+      run: npm run lib:build --prefix openvidu-components-angular
+    - name: Build openvidu-webcomponent
+      run: npm run webcomponent:build --prefix openvidu-components-angular
+    - name: Serve Webcomponent Testapp
+      run: npm run webcomponent:serve-testapp --prefix openvidu-components-angular &
+    - name: Run Webcomponent E2E PRO
+      env:
+        OPENVIDU_SERVER_URL: ${{ secrets.OPENVIDU_CALL_NEXT_URL }}
+        OPENVIDU_SECRET: ${{ secrets.OPENVIDU_CALL_NEXT_SECRET }}
+      run: npm run webcomponent:e2e-pro-ci --prefix openvidu-components-angular
diff --git a/openvidu-components-angular/e2e/config.ts b/openvidu-components-angular/e2e/config.ts
index ce5f43ac..86ab2afe 100644
--- a/openvidu-components-angular/e2e/config.ts
+++ b/openvidu-components-angular/e2e/config.ts
@@ -1 +1,3 @@
 export const LAUNCH_MODE = process.env.LAUNCH_MODE || 'DEV';
+export const OPENVIDU_SERVER_URL = process.env.OPENVIDU_SERVER_URL || 'http://localhost:4443';
+export const OPENVIDU_SECRET = process.env.OPENVIDU_SECRET || 'MY_SECRET';
diff --git a/openvidu-components-angular/e2e/webcomponent-app/app.js b/openvidu-components-angular/e2e/webcomponent-app/app.js
index 8ac36a66..89cb2a00 100644
--- a/openvidu-components-angular/e2e/webcomponent-app/app.js
+++ b/openvidu-components-angular/e2e/webcomponent-app/app.js
@@ -29,9 +29,17 @@ var SESSION_NAME;
 
 var PARTICIPANT_NAME;
 
+
+var OPENVIDU_SERVER_URL;
+var OPENVIDU_SECRET;
+
 $(document).ready(() => {
 	var url = new URL(window.location.href);
 
+    OPENVIDU_SERVER_URL = url.searchParams.get('OV_URL');
+    OPENVIDU_SECRET = url.searchParams.get('OV_SECRET')
+
+
 	SINGLE_TOKEN = url.searchParams.get('singleToken') === null ? false : url.searchParams.get('singleToken') === 'true';
 
 	// Directives
@@ -214,8 +222,6 @@ async function joinSession(sessionName, participantName) {
  *   3) Configure OpenVidu Web Component in your client side with the token
  */
 
-var OPENVIDU_SERVER_URL = 'http://localhost:4443';
-var OPENVIDU_SERVER_SECRET = 'MY_SECRET';
 
 function getToken(sessionName) {
 	return createSession(sessionName).then((sessionId) => createToken(sessionId));
@@ -229,7 +235,7 @@ function createSession(sessionName) {
 			url: OPENVIDU_SERVER_URL + '/openvidu/api/sessions',
 			data: JSON.stringify({ customSessionId: sessionName }),
 			headers: {
-				Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
+				Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SECRET),
 				'Content-Type': 'application/json'
 			},
 			success: (response) => resolve(response.id),
@@ -264,7 +270,7 @@ function createToken(sessionId) {
 			url: `${OPENVIDU_SERVER_URL}/openvidu/api/sessions/${sessionId}/connection`,
 			data: JSON.stringify({ session: sessionId, role: 'MODERATOR' }),
 			headers: {
-				Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
+				Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SECRET),
 				'Content-Type': 'application/json'
 			},
 			success: (response) => {
diff --git a/openvidu-components-angular/e2e/webcomponent.pro.test.ts b/openvidu-components-angular/e2e/webcomponent.pro.test.ts
new file mode 100644
index 00000000..82414494
--- /dev/null
+++ b/openvidu-components-angular/e2e/webcomponent.pro.test.ts
@@ -0,0 +1,343 @@
+import { expect } from 'chai';
+import { Builder, WebDriver } from 'selenium-webdriver';
+import { OPENVIDU_SECRET, OPENVIDU_SERVER_URL } from './config';
+import { WebComponentConfig } from './selenium.conf';
+import { OpenViduComponentsPO } from './utils.po.test';
+
+const url = `${WebComponentConfig.appUrl}?OV_URL=${OPENVIDU_SERVER_URL}&OV_SECRET=${OPENVIDU_SECRET}`;
+
+/**
+ *
+ * Testing PRO features with OpenVidu PRO
+ * TODO: Change the openvidu URL when openvidu-pro-dev exists
+ */
+
+describe('Testing API Directives', () => {
+	let browser: WebDriver;
+	let utils: OpenViduComponentsPO;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(WebComponentConfig.browserName)
+			.withCapabilities(WebComponentConfig.browserCapabilities)
+			.setChromeOptions(WebComponentConfig.browserOptions)
+			.usingServer(WebComponentConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+		utils = new OpenViduComponentsPO(browser);
+	});
+
+	afterEach(async () => {
+		// console.log('data:image/png;base64,' + await browser.takeScreenshot());
+		await browser.quit();
+	});
+
+	it('should change the captions LANG ', async () => {
+		await browser.get(`${url}&prejoin=false&captionsLang=es-ES`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+		await utils.waitForElement('#caption-settings-btn');
+		await utils.clickOn('#caption-settings-btn');
+
+		await browser.sleep(500);
+
+		await utils.waitForElement('.settings-container');
+		expect(await utils.isPresent('.settings-container')).to.be.true;
+
+		await utils.waitForElement('ov-captions-settings');
+
+		expect(await utils.isPresent('.captions-container')).to.be.true;
+
+		const element = await utils.waitForElement('.lang-button');
+		expect(await element.getText()).equal('Españolexpand_more');
+	});
+
+	it('should override the CAPTIONS LANG OPTIONS', async () => {
+		await browser.get(`${url}&prejoin=false&captionsLangOptions=true`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+		await utils.waitForElement('#caption-settings-btn');
+		await utils.clickOn('#caption-settings-btn');
+
+		await browser.sleep(500);
+
+		await utils.waitForElement('.settings-container');
+		expect(await utils.isPresent('.settings-container')).to.be.true;
+
+		await utils.waitForElement('ov-captions-settings');
+
+		expect(await utils.isPresent('.captions-container')).to.be.true;
+
+		const element = await utils.waitForElement('.lang-button');
+		expect(await element.getText()).equal('Espexpand_more');
+
+		await element.click();
+
+		expect(await utils.getNumberOfElements('.mat-menu-item')).equals(2);
+	});
+});
+
+describe('Testing panels', () => {
+	let browser: WebDriver;
+	let utils: OpenViduComponentsPO;
+
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(WebComponentConfig.browserName)
+			.withCapabilities(WebComponentConfig.browserCapabilities)
+			.setChromeOptions(WebComponentConfig.browserOptions)
+			.usingServer(WebComponentConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+		utils = new OpenViduComponentsPO(browser);
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
+
+	it('should toggle BACKGROUND panel on prejoin page when VIDEO is MUTED', async () => {
+		let element;
+		await browser.get(`${url}`);
+		element = await utils.waitForElement('#pre-join-container');
+		expect(await utils.isPresent('#pre-join-container')).to.be.true;
+
+		const backgroundButton = await utils.waitForElement('#background-effects-btn');
+		expect(await utils.isPresent('#background-effects-btn')).to.be.true;
+		expect(await backgroundButton.isEnabled()).to.be.true;
+		await backgroundButton.click();
+		await browser.sleep(500);
+
+		await utils.waitForElement('#background-effects-container');
+		expect(await utils.isPresent('#background-effects-container')).to.be.true;
+
+		element = await utils.waitForElement('#camera-button');
+		expect(await utils.isPresent('#camera-button')).to.be.true;
+		expect(await element.isEnabled()).to.be.true;
+		await element.click();
+
+		await browser.sleep(500);
+		element = await utils.waitForElement('#video-poster');
+		expect(await utils.isPresent('#video-poster')).to.be.true;
+
+		expect(await backgroundButton.isDisplayed()).to.be.true;
+		expect(await backgroundButton.isEnabled()).to.be.false;
+
+		expect(await utils.isPresent('#background-effects-container')).to.be.false;
+	});
+});
+
+describe('Testing captions features', () => {
+	let browser: WebDriver;
+	let utils: OpenViduComponentsPO;
+	async function createChromeBrowser(): Promise<WebDriver> {
+		return await new Builder()
+			.forBrowser(WebComponentConfig.browserName)
+			.withCapabilities(WebComponentConfig.browserCapabilities)
+			.setChromeOptions(WebComponentConfig.browserOptions)
+			.usingServer(WebComponentConfig.seleniumAddress)
+			.build();
+	}
+
+	beforeEach(async () => {
+		browser = await createChromeBrowser();
+		utils = new OpenViduComponentsPO(browser);
+	});
+
+	afterEach(async () => {
+		await browser.quit();
+	});
+
+	it('should OPEN the CAPTIONS container', async () => {
+		await browser.get(`${url}&prejoin=false`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+	});
+
+	it('should OPEN the SETTINGS panel from captions button', async () => {
+		await browser.get(`${url}&prejoin=false`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+		await utils.waitForElement('#caption-settings-btn');
+		await utils.clickOn('#caption-settings-btn');
+
+		await browser.sleep(500);
+
+		await utils.waitForElement('.settings-container');
+		expect(await utils.isPresent('.settings-container')).to.be.true;
+
+		await utils.waitForElement('ov-captions-settings');
+
+		// Expect caption button is not present
+		expect(await utils.isPresent('#caption-settings-btn')).to.be.false;
+	});
+
+	it('should TOGGLE the CAPTIONS container from settings panel', async () => {
+		await browser.get(`${url}&prejoin=false`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+		await utils.waitForElement('#caption-settings-btn');
+		await utils.clickOn('#caption-settings-btn');
+
+		await browser.sleep(500);
+
+		await utils.waitForElement('.settings-container');
+		expect(await utils.isPresent('.settings-container')).to.be.true;
+
+		await utils.waitForElement('ov-captions-settings');
+
+		expect(await utils.isPresent('.captions-container')).to.be.true;
+		await utils.clickOn('#captions-toggle-slide');
+		expect(await utils.isPresent('.captions-container')).to.be.false;
+
+		await browser.sleep(200);
+
+		await utils.clickOn('#captions-toggle-slide');
+		expect(await utils.isPresent('.captions-container')).to.be.true;
+	});
+
+	it('should change the CAPTIONS language', async () => {
+		await browser.get(`${url}&prejoin=false`);
+
+		await utils.checkSessionIsPresent();
+
+		// Checking if toolbar is present
+		await utils.checkToolbarIsPresent();
+
+		// Open more options menu
+		await utils.clickOn('#more-options-btn');
+
+		await browser.sleep(500);
+
+		// Checking if button panel is present
+		await utils.waitForElement('.mat-menu-content');
+		expect(await utils.isPresent('.mat-menu-content')).to.be.true;
+
+		// Checking if captions button is present
+		await utils.waitForElement('#captions-btn');
+		expect(await utils.isPresent('#captions-btn')).to.be.true;
+		await utils.clickOn('#captions-btn');
+
+		await utils.waitForElement('.captions-container');
+		await utils.waitForElement('#caption-settings-btn');
+		await utils.clickOn('#caption-settings-btn');
+
+		await browser.sleep(500);
+
+		await utils.waitForElement('.settings-container');
+		expect(await utils.isPresent('.settings-container')).to.be.true;
+
+		await utils.waitForElement('ov-captions-settings');
+
+		expect(await utils.isPresent('.captions-container')).to.be.true;
+
+		await utils.clickOn('.lang-button');
+		await browser.sleep(500);
+
+		await utils.clickOn('#es-ES');
+		await utils.clickOn('.panel-close-button');
+
+		const button = await utils.waitForElement('#caption-settings-btn');
+		expect(await button.getText()).equals('settingsEspañol');
+	});
+});
diff --git a/openvidu-components-angular/package.json b/openvidu-components-angular/package.json
index a634103e..230d8b69 100644
--- a/openvidu-components-angular/package.json
+++ b/openvidu-components-angular/package.json
@@ -73,6 +73,8 @@
         "webcomponent:build": "./node_modules/@angular/cli/bin/ng.js build openvidu-webcomponent --configuration production && node ./openvidu-webcomponent-build.js",
         "webcomponent:e2e": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.test.js",
         "webcomponent:e2e-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e",
+        "webcomponent:e2e-pro": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/webcomponent.pro.test.js",
+        "webcomponent:e2e-pro-ci": "cross-env LAUNCH_MODE=CI npm run webcomponent:e2e-pro",
         "webcomponent:serve-testapp": "npx http-server ./e2e/webcomponent-app/"
     },
     "version": "2.24.0"