test(frontend): upgrade frontend integration test dependencies and base image. (#8806)

* upgrade frontend integration test dependencies and base image.

* remote unused libraries

* fix junit config

* fix junit config
This commit is contained in:
Chen Sun 2023-02-06 17:24:39 -08:00 committed by GitHub
parent 6522e6c48a
commit fe71e17a4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 5311 additions and 1561 deletions

View File

@ -1,4 +1,4 @@
FROM gcr.io/ml-pipeline-test/selenium-standalone-chrome-gcloud-nodejs:v20200210-0.2.2-30-g05865480-e3b0c4
FROM gcr.io/ml-pipeline-test/selenium-standalone-chrome-gcloud-nodejs:v20230201-2.0.0b11-74-g395719cab-dirty-9bed65
#To build this image: cd selenium-standalone-chrome-gcloud-nodejs.Docker && make push
COPY --chown=seluser . /src

View File

@ -1,4 +1,4 @@
// Copyright 2018 The Kubeflow Authors
// Copyright 2018-2023 The Kubeflow Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
@ -21,272 +21,292 @@ const pipelineName = 'helloworld-pipeline-' + Date.now();
const runName = 'helloworld-' + Date.now();
const runDescription = 'test run description ' + runName;
const runWithoutExperimentName = 'helloworld-2-' + Date.now();
const runWithoutExperimentDescription = 'test run without experiment description ' + runWithoutExperimentName;
const runWithoutExperimentDescription =
'test run without experiment description ' + runWithoutExperimentName;
const waitTimeout = 5000;
const outputParameterValue = 'Hello world in test'
const outputParameterValue = 'Hello world in test';
function getValueFromDetailsTable(key) {
async function getValueFromDetailsTable(key) {
// Find the span that shows the key, get its parent div (the row), then
// get that row's inner text, and remove the key
const row = $(`span=${key}`).$('..');
return row.getText().substr(`${key}\n`.length);
const rowText = await $(`span=${key}`).$('..').getText();
return rowText.substr(`${key}\n`.length);
}
describe('deploy helloworld sample run', () => {
before(() => {
browser.url('/');
before(async () => {
await browser.url('/');
});
it('open pipeline creation page', () => {
$('#createPipelineVersionBtn').click();
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/pipeline_versions/new');
it('open pipeline creation page', async () => {
await $('#createPipelineVersionBtn').click();
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/pipeline_versions/new');
}, waitTimeout);
});
it('uploads the sample pipeline', () => {
$('#localPackageBtn').click();
browser.chooseFile('#dropZone input[type="file"]', './helloworld.yaml');
$('#newPipelineName').setValue(pipelineName);
$('#createNewPipelineOrVersionBtn').click();
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/pipelines/details');
it('uploads the sample pipeline', async () => {
await $('#localPackageBtn').click();
const remoteFilePath = await browser.uploadFile('./helloworld.yaml');
await $('#dropZone input[type="file"]').addValue(remoteFilePath);
await $('#newPipelineName').setValue(pipelineName);
await $('#createNewPipelineOrVersionBtn').click();
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/pipelines/details');
}, waitTimeout);
});
it('shows a 4-node static graph', () => {
it('shows a 4-node static graph', async () => {
const nodeSelector = '.graphNode';
$(nodeSelector).waitForVisible();
const nodes = $$(nodeSelector).length;
assert(nodes === 4, 'should have a 4-node graph, instead has: ' + nodes);
await $(nodeSelector);
const nodes = await $$(nodeSelector);
assert(nodes.length === 4, 'should have a 4-node graph, instead has: ' + nodes.length);
});
it('creates a new experiment out of this pipeline', () => {
$('#newExperimentBtn').click();
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/experiments/new');
it('creates a new experiment out of this pipeline', async () => {
await $('#newExperimentBtn').click();
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/experiments/new');
}, waitTimeout);
$('#experimentName').setValue(experimentName);
$('#experimentDescription').setValue(experimentDescription);
await $('#experimentName').setValue(experimentName);
await $('#experimentDescription').setValue(experimentDescription);
$('#createExperimentBtn').click();
await $('#createExperimentBtn').click();
});
it('creates a new run in the experiment', () => {
$('#choosePipelineBtn').waitForVisible();
$('#choosePipelineBtn').click();
it('creates a new run in the experiment', async () => {
await $('#choosePipelineBtn').waitForDisplayed();
await $('#choosePipelineBtn').click();
$('.tableRow').waitForVisible();
$('.tableRow').click();
await $('.tableRow').waitForDisplayed();
await $('.tableRow').click();
$('#usePipelineBtn').click();
await $('#usePipelineBtn').click();
$('#pipelineSelectorDialog').waitForVisible(waitTimeout, true);
await $('#pipelineSelectorDialog').waitForDisplayed({ timeout: waitTimeout, reverse: true });
$('#choosePipelineVersionBtn').waitForVisible();
$('#choosePipelineVersionBtn').click();
await $('#choosePipelineVersionBtn').waitForDisplayed();
await $('#choosePipelineVersionBtn').click();
$('.tableRow').waitForVisible();
$('.tableRow').click();
await $('.tableRow').waitForDisplayed();
await $('.tableRow').click();
$('#usePipelineVersionBtn').click();
await $('#usePipelineVersionBtn').click();
$('#pipelineVersionSelectorDialog').waitForVisible(waitTimeout, true);
browser.pause(1000);
browser.keys(runName);
await $('#pipelineVersionSelectorDialog').waitForDisplayed({
timeout: waitTimeout,
reverse: true,
});
browser.keys('Tab');
browser.keys(runDescription);
await browser.keys(runName);
await browser.keys('Tab');
await browser.keys(runDescription);
// Skip over "choose experiment" button
browser.keys('Tab');
await browser.keys('Tab');
// Skip over service account help button
browser.keys('Tab');
await browser.keys('Tab');
// Skip over "service account" textbox
browser.keys('Tab');
await browser.keys('Tab');
// Skip over "Run Type" radio button
browser.keys('Tab');
await browser.keys('Tab');
browser.keys('Tab');
browser.keys(outputParameterValue);
await browser.keys('Tab');
await browser.keys(outputParameterValue);
// Deploy
$('#startNewRunBtn').click();
await $('#startNewRunBtn').click();
});
it('redirects back to experiment page', () => {
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/experiments/details/');
it('redirects back to experiment page', async () => {
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/experiments/details/');
}, waitTimeout);
});
it('finds the new run in the list of runs, navigates to it', () => {
it('finds the new run in the list of runs, navigates to it', async () => {
let attempts = 30;
// Wait for a reasonable amount of time until the run starts
while (attempts && !$('.tableRow a').isExisting()) {
browser.pause(1000);
$('#refreshBtn').click();
await browser.pause(1000);
await $('#refreshBtn').click();
--attempts;
}
assert(attempts, 'waited for 30 seconds but run did not start.');
assert.equal($$('.tableRow').length, 1, 'should only show one run');
assert.equal(await $$('.tableRow').length, 1, 'should only show one run');
// Navigate to details of the deployed run by clicking its anchor element
browser.execute('document.querySelector(".tableRow a").click()');
await browser.execute('document.querySelector(".tableRow a").click()');
});
it('switches to config tab', () => {
$('button=Config').waitForVisible(waitTimeout);
$('button=Config').click();
it('switches to config tab', async () => {
await $('button=Config').waitForDisplayed({ timeout: waitTimeout });
await $('button=Config').click();
});
it('waits for run to finish', () => {
let status = getValueFromDetailsTable('Status');
it('waits for run to finish', async () => {
let status = await getValueFromDetailsTable('Status');
let attempts = 0;
const maxAttempts = 60;
// Wait for a reasonable amount of time until the run is done
while (attempts < maxAttempts && status.trim() !== 'Succeeded') {
browser.pause(1000);
status = getValueFromDetailsTable('Status');
await browser.pause(1000);
status = await getValueFromDetailsTable('Status');
attempts++;
}
assert(attempts < maxAttempts, `waited for ${maxAttempts} seconds but run did not succeed. ` +
'Current status is: ' + status);
assert(
attempts < maxAttempts,
`waited for ${maxAttempts} seconds but run did not succeed. ` +
'Current status is: ' +
status,
);
});
it('displays run created at date correctly', () => {
const date = getValueFromDetailsTable('Created at');
assert(Date.now() - new Date(date) < 10 * 60 * 1000,
'run created date should be within the last 10 minutes');
it('displays run created at date correctly', async () => {
const date = await getValueFromDetailsTable('Created at');
assert(
Date.now() - new Date(date) < 10 * 60 * 1000,
'run created date should be within the last 10 minutes',
);
});
it('displays run inputs correctly', () => {
const paramValue = getValueFromDetailsTable('message');
it('displays run inputs correctly', async () => {
const paramValue = await getValueFromDetailsTable('message');
assert.equal(paramValue, outputParameterValue, 'run message is not shown correctly');
});
it('switches back to graph tab', () => {
$('button=Graph').click();
it('switches back to graph tab', async () => {
await $('button=Graph').click();
});
it('has a 4-node graph', () => {
it('has a 4-node graph', async () => {
const nodeSelector = '.graphNode';
const nodes = $$(nodeSelector).length;
const nodes = await $$(nodeSelector).length;
assert(nodes === 4, 'should have a 4-node graph, instead has: ' + nodes);
});
it('opens the side panel when graph node is clicked', () => {
$('.graphNode').click();
browser.pause(1000);
$('button=Logs').waitForVisible();
it('opens the side panel when graph node is clicked', async () => {
await $('.graphNode').click();
await browser.pause(1000);
await $('button=Logs').waitForDisplayed();
});
it('shows logs from node', () => {
$('button=Logs').click();
$('#logViewer').waitForVisible();
browser.waitUntil(() => {
const logs = $('#logViewer').getText();
it('shows logs from node', async () => {
await $('button=Logs').click();
await $('#logViewer').waitForDisplayed();
await browser.waitUntil(async () => {
const logs = await $('#logViewer').getText();
return logs.indexOf(outputParameterValue + ' from node: ') > -1;
}, waitTimeout);
});
it('navigates to the runs page', () => {
$('#runsBtn').click();
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/runs');
it('navigates to the runs page', async () => {
await $('#runsBtn').click();
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/runs');
}, waitTimeout);
});
it('creates a new run without selecting an experiment', () => {
$('#createNewRunBtn').waitForVisible();
$('#createNewRunBtn').click();
it('creates a new run without selecting an experiment', async () => {
await $('#createNewRunBtn').waitForDisplayed();
await $('#createNewRunBtn').click();
$('#choosePipelineBtn').waitForVisible();
$('#choosePipelineBtn').click();
await $('#choosePipelineBtn').waitForDisplayed();
await $('#choosePipelineBtn').click();
$('.tableRow').waitForVisible();
$('.tableRow').click();
await $('.tableRow').waitForDisplayed();
await $('.tableRow').click();
$('#usePipelineBtn').click();
await $('#usePipelineBtn').click();
$('#pipelineSelectorDialog').waitForVisible(waitTimeout, true);
await $('#pipelineSelectorDialog').waitForDisplayed({ timeout: waitTimeout, reverse: true });
browser.keys('Tab');
browser.keys(runWithoutExperimentName);
await browser.keys('Tab');
await browser.keys(runWithoutExperimentName);
browser.keys('Tab');
browser.keys(runWithoutExperimentDescription);
await browser.keys('Tab');
await browser.keys(runWithoutExperimentDescription);
// Skip over "choose experiment" button
browser.keys('Tab');
await browser.keys('Tab');
// Skip over service account help button
browser.keys('Tab');
await browser.keys('Tab');
// Skip over "service account" textbox
browser.keys('Tab');
await browser.keys('Tab');
// Skip over "Run Type" radio button
browser.keys('Tab');
await browser.keys('Tab');
browser.keys('Tab');
browser.keys(outputParameterValue);
await browser.keys('Tab');
await browser.keys(outputParameterValue);
// Deploy
$('#startNewRunBtn').click();
await $('#startNewRunBtn').click();
});
it('redirects back to all runs page', () => {
browser.waitUntil(() => {
return (new URL(browser.getUrl())).hash === '#/runs';
}, waitTimeout, `URL was: ${new URL(browser.getUrl())}`);
it('redirects back to all runs page', async () => {
await browser.waitUntil(
async () => {
return new URL(await browser.getUrl()).hash === '#/runs';
},
waitTimeout,
`URL was: ${new URL(await browser.getUrl())}`,
);
});
it('displays both runs in all runs page', () => {
$('.tableRow').waitForVisible();
const rows = $$('.tableRow').length;
it('displays both runs in all runs page', async () => {
await $('.tableRow').waitForDisplayed();
const rows = await $$('.tableRow').length;
assert(rows === 2, 'there should now be two runs in the table, instead there are: ' + rows);
});
it('navigates back to the experiment list', () => {
$('button=Experiments').click();
browser.waitUntil(() => {
return new URL(browser.getUrl()).hash.startsWith('#/experiments');
it('navigates back to the experiment list', async () => {
await $('button=Experiments').click();
await browser.waitUntil(async () => {
return new URL(await browser.getUrl()).hash.startsWith('#/experiments');
}, waitTimeout);
});
it('displays both experiments in the list', () => {
$('.tableRow').waitForVisible();
const rows = $$('.tableRow').length;
assert(rows === 2, 'there should now be two experiments in the table, instead there are: ' + rows);
it('displays both experiments in the list', async () => {
await $('.tableRow').waitForDisplayed();
const rows = await $$('.tableRow').length;
assert(
rows === 2,
'there should now be two experiments in the table, instead there are: ' + rows,
);
});
it('filters the experiment list', () => {
it('filters the experiment list', async () => {
// Enter "hello" into filter bar
browser.click('#tableFilterBox');
browser.keys(experimentName.substring(0, 5));
await $('#tableFilterBox').click();
await browser.keys(experimentName.substring(0, 5));
// Wait for the list to refresh
browser.pause(2000);
await browser.pause(2000);
$('.tableRow').waitForVisible();
const rows = $$('.tableRow').length;
assert(rows === 1, 'there should now be one experiment in the table, instead there are: ' + rows);
await $('.tableRow').waitForDisplayed();
const rows = await $$('.tableRow').length;
assert(
rows === 1,
'there should now be one experiment in the table, instead there are: ' + rows,
);
});
//TODO: enable this after we change the pipeline to a unique name such that deleting this
// pipeline will not jeopardize the concurrent basic e2e tests.
// it('deletes the uploaded pipeline', () => {
// $('#pipelinesBtn').click();
// it('deletes the uploaded pipeline', async () => {
// await $('#pipelinesBtn').click();
//
// browser.waitForVisible('.tableRow', waitTimeout);
// $('.tableRow').click();
// $('#deleteBtn').click();
// $('.dialogButton').click();
// $('.dialog').waitForVisible(waitTimeout, true);
// await $('.tableRow').waitForDisplayed({timeout: waitTimeout});
// await $('.tableRow').click();
// await $('#deleteBtn').click();
// await $('.dialogButton').click();
// await $('.dialog').waitForDisplayed({timeout: waitTimeout, reverse:true});
// });
});

File diff suppressed because it is too large Load Diff

View File

@ -3,13 +3,15 @@
"version": "0.0.1",
"description": "Visual regression end to end test package for ML Pipelines",
"dependencies": {
"lodash": ">=4.17.21",
"mocha": "^5.2.0",
"wait-port": "^0.2.2",
"wdio-junit-reporter": "^0.4.4",
"wdio-mocha-framework": "^0.6.2",
"wdio-selenium-standalone-service": "0.0.10",
"webdriverio": "^4.14.1"
"@wdio/cli": "^8.3.2",
"@wdio/junit-reporter": "^8.3.0",
"@wdio/local-runner": "^8.3.3",
"@wdio/mocha-framework": "^8.3.0",
"@wdio/selenium-standalone-service": "^8.3.2",
"@wdio/spec-reporter": "^8.3.0",
"mocha": "^10.2.0",
"wait-port": "^1.0.4",
"webdriverio": "^8.3.2"
},
"scripts": {
"docker": "docker build -t gcr.io/ml-pipeline/e2e-tests .",

View File

@ -1,8 +1,8 @@
FROM selenium/standalone-chrome:3.141.59-oxygen
FROM selenium/standalone-chrome:109.0.5414.119-chromedriver-109.0.5414.74-20230131
USER root
ARG CLOUD_SDK_VERSION=279.0.0
ARG CLOUD_SDK_VERSION=416.0.0
ENV CLOUD_SDK_VERSION=$CLOUD_SDK_VERSION
ARG INSTALL_COMPONENTS=kubectl
@ -10,8 +10,8 @@ ENV PATH "$PATH:/opt/google-cloud-sdk/bin/"
RUN apt-get update -qqy && apt-get install -qqy \
curl \
gcc \
python-dev \
python-pip \
python3-dev \
python3-pip \
apt-transport-https \
lsb-release \
openssh-client \
@ -19,14 +19,13 @@ RUN apt-get update -qqy && apt-get install -qqy \
gnupg \
&& \
pip install -U crcmod && \
export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)" && \
echo "deb https://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" > /etc/apt/sources.list.d/google-cloud-sdk.list && \
echo "deb https://packages.cloud.google.com/apt cloud-sdk main" > /etc/apt/sources.list.d/google-cloud-sdk.list && \
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add - && \
apt-get update && apt-get install -y google-cloud-sdk=${CLOUD_SDK_VERSION}-0 $INSTALL_COMPONENTS && \
rm -rf /var/lib/apt/lists/* /tmp/* /usr/share/locale/* /usr/share/i18n/locales/*
RUN curl --silent --show-error --location https://deb.nodesource.com/setup_8.x | bash - && \
RUN curl --silent --show-error --location https://deb.nodesource.com/setup_14.x | bash - && \
apt-get install -y nodejs
USER seluser

View File

@ -15,41 +15,45 @@
const debug = process.env.DEBUG == '1' || process.env.DEBUG == 'true';
exports.config = {
runner: 'local',
host: '127.0.0.1',
port: 4444,
maxInstances: 1,
baseUrl: 'http://localhost:3000',
capabilities: [{
capabilities: [
{
maxInstances: 1,
browserName: 'chrome',
chromeOptions: {
args: debug ? [] : ['--headless', '--disable-gpu'],
'goog:chromeOptions': {
args: ['--headless', '--disable-gpu'],
},
}],
},
],
coloredLogs: true,
connectionRetryCount: 3,
connectionRetryTimeout: 90000,
deprecationWarnings: false,
framework: 'mocha',
host: '127.0.0.1',
port: 4444,
mochaOpts: {
ui: 'bdd',
// units: ms
//TODO:Reduce the timeout once the tests become shorter
timeout: debug ? 99999999 : 1200000,
timeout: 1200000,
},
logLevel: 'silent',
reporters: debug ? [] : ['dot', 'junit'],
reporterOptions: debug ? {} : {
junit: {
logLevel: debug ? 'info' : 'silent',
reporters: [
'spec',
[
'junit',
{
outputDir: './',
outputFileFormat: {
single: () => 'junit_FrontendIntegrationTestOutput.xml',
}
outputFileFormat: function (options) {
return 'junit_FrontendIntegrationTestOutput.xml';
},
},
services: debug ? ['selenium-standalone'] : [],
specs: [
'./helloworld.spec.js',
],
],
services: debug ? [['selenium-standalone', { drivers: { chrome: 'latest' } }]] : [],
specs: ['./helloworld.spec.js'],
sync: true,
waitforTimeout: 10000,
}
};