cypress: use selectFromColorPicker which doesn't rely on generated id's

prefer picker id, not palette id with number which is generated

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I52d30c3991b516378e82455fdc104b5d94e94f91

2 files changed, 32 insertions, 9 deletions

diff --git a/cypress_test/integration_tests/common/mobile_helper.js b/cypress_test/integration_tests/common/mobile_helper.js
index 0b03959bd9..36842e1e8c 100644
--- a/cypress_test/integration_tests/common/mobile_helper.js
+++ b/cypress_test/integration_tests/common/mobile_helper.js
@@ -230,6 +230,7 @@ function closeInsertionWizard() {
 	cy.log('Closing insertion wizard - end.');
 }
 
+/// deprecated: see selectFromColorPicker function instead
 function selectFromColorPalette(paletteNum, groupNum, paletteAfterChangeNum, colorNum) {
 	cy.log('Selecting a color from the color palette - start.');
 
@@ -251,6 +252,27 @@ function selectFromColorPalette(paletteNum, groupNum, paletteAfterChangeNum, col
 	cy.log('Selecting a color from the color palette - end.');
 }
 
+function selectFromColorPicker(pickerId, groupNum, colorNum) {
+	cy.log('Selecting a color from the color palette - start.');
+
+	cy.get(pickerId + ' [id^=color-picker-][id$=-basic-color-' + groupNum.toString() + ']')
+		.click();
+
+	cy.wait(1000);
+
+	if (colorNum !== undefined) {
+		cy.get(pickerId + ' [id^=color-picker-][id$=-tint-' + colorNum.toString() + ']')
+			.click();
+	}
+
+	cy.wait(1000);
+
+	cy.get('#mobile-wizard-back')
+		.click();
+
+	cy.log('Selecting a color from the color palette - end.');
+}
+
 function openTextPropertiesPanel() {
 	openMobileWizard();
 
@@ -391,6 +413,7 @@ module.exports.executeCopyFromContextMenu = executeCopyFromContextMenu;
 module.exports.openInsertionWizard = openInsertionWizard;
 module.exports.closeInsertionWizard = closeInsertionWizard;
 module.exports.selectFromColorPalette = selectFromColorPalette;
+module.exports.selectFromColorPicker = selectFromColorPicker;
 module.exports.openTextPropertiesPanel = openTextPropertiesPanel;
 module.exports.selectListBoxItem = selectListBoxItem;
 module.exports.selectListBoxItem2 = selectListBoxItem2;
diff --git a/cypress_test/integration_tests/mobile/impress/apply_font_text_spec.js b/cypress_test/integration_tests/mobile/impress/apply_font_text_spec.js
index bb01bd1df6..2db9079d81 100644
--- a/cypress_test/integration_tests/mobile/impress/apply_font_text_spec.js
+++ b/cypress_test/integration_tests/mobile/impress/apply_font_text_spec.js
@@ -30,7 +30,7 @@ describe('Apply font on selected text.', function() {
 
 		mobileHelper.openTextPropertiesPanel();
 
-		helper.clickOnIdle('#Bold');
+		helper.clickOnIdle('.unoBold');
 
 		triggerNewSVG();
 
@@ -43,7 +43,7 @@ describe('Apply font on selected text.', function() {
 
 		mobileHelper.openTextPropertiesPanel();
 
-		helper.clickOnIdle('#Italic');
+		helper.clickOnIdle('.unoItalic');
 
 		triggerNewSVG();
 
@@ -56,7 +56,7 @@ describe('Apply font on selected text.', function() {
 
 		mobileHelper.openTextPropertiesPanel();
 
-		helper.clickOnIdle('#Underline');
+		helper.clickOnIdle('.unoUnderline');
 
 		triggerNewSVG();
 
@@ -69,7 +69,7 @@ describe('Apply font on selected text.', function() {
 
 		mobileHelper.openTextPropertiesPanel();
 
-		helper.clickOnIdle('#Strikeout');
+		helper.clickOnIdle('.unoStrikeout');
 
 		triggerNewSVG();
 
@@ -82,7 +82,7 @@ describe('Apply font on selected text.', function() {
 
 		mobileHelper.openTextPropertiesPanel();
 
-		helper.clickOnIdle('#Shadowed');
+		helper.clickOnIdle('.unoShadowed');
 
 		triggerNewSVG();
 
@@ -129,7 +129,7 @@ describe('Apply font on selected text.', function() {
 
 		helper.clickOnIdle('#Color .ui-header');
 
-		mobileHelper.selectFromColorPalette(2, 5, 13, 2);
+		mobileHelper.selectFromColorPicker('#Color', 5, 2);
 
 		triggerNewSVG();
 
@@ -144,7 +144,7 @@ describe('Apply font on selected text.', function() {
 
 		helper.clickOnIdle('#CharBackColor .ui-header');
 
-		mobileHelper.selectFromColorPalette(3, 2, 13, 2);
+		mobileHelper.selectFromColorPicker('#CharBackColor', 2, 2);
 
 		cy.get('#CharBackColor .color-sample-selected')
 			.should('have.attr', 'style', 'background-color: rgb(204, 0, 0);');
@@ -172,7 +172,7 @@ describe('Apply font on selected text.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		helper.clickOnIdle('#SuperScript');
+		helper.clickOnIdle('.unoSuperScript');
 
 		triggerNewSVG();
 
@@ -192,7 +192,7 @@ describe('Apply font on selected text.', function() {
 		cy.get('.leaflet-pane.leaflet-overlay-pane g.Page .TextParagraph')
 			.should('have.attr', 'font-size', '635px');
 
-		helper.clickOnIdle('#SubScript');
+		helper.clickOnIdle('.unoSubScript');
 
 		triggerNewSVG();