В течение последних нескольких месяцев я разрабатывал модельер рабочего процесса для заключительного этапа моего обучения SE на основе SO. Я использовал mxGraph и ванильный javascript, и я попытался настроить некоторые базовые тесты E2E с помощью Cypress.
Я столкнулся с некоторыми проблемами (я предполагаю) с запуском прослушивателей событий. Некоторые кнопки ДЕЙСТВИТЕЛЬНО реагируют на щелчки / срабатывания кипариса, а некоторые - НЕ. Ни одна из кнопок в моем приложении не имеет действий onClick или какого-либо другого атрибута, содержащего метод модели или контроллера. Вместо этого у всех кнопок и клавиш есть обработчики и слушатели, созданные служебным классом mxGraph-editor.
Я попытался воссоздать некоторые действия, используя те же тесты E2E на публичных примерах mxGraph (см. Код cypress). Перетаскивание объекта (из меню на холст (№1) и с холста на холст (№4)) И выбор объекта (№2), к сожалению, не работают.
Однако двойной щелчок по объекту и изменение текста (# 3) ДЕЙСТВУЮТ ... и я потерялся. Я перепробовал все разные способы принуждения, ожидания, щелчка и запуска, но все безрезультатно.
describe('mxGraph "ports" example', function () {
it('Start ports example', function () {
cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/ports.html')
cy.wait(500)
})
// Example #1 : FAIL
it('#1 Create new object by dragging', function () {
cy.get('div[id="sidebarContainer"]').find('img[title="Drag this to the diagram to create a new vertex"]').first()
.trigger('mousedown', { force: true})
.trigger('mousemove', { clientX: 250, clientY: 250, force: true})
.trigger('mouseup', {force: true})
cy.get('div[id="graphContainer"]').find('svg').trigger('drop', { force: true })
cy.wait(500)
})
})
describe('mxGraph "user object" example', function () {
it('Start userobject example', function () {
cy.visit('https://jgraph.github.io/mxgraph/javascript/examples/userobject.html')
cy.wait(500)
})
// Example #2 : FAIL
it('#2 Single click on object (green highlight should appear)', function () {
cy.get('rect').first().click({ force: true })
cy.wait(500)
})
// Example #3 : PASS
it('#3 Double click & edit object (Text should be modified)', function () {
cy.get('rect').first().dblclick({ force: true })
cy.wait(500)
cy.get('div [class="mxCellEditor mxPlainTextEditor"]').first().type('text modified')
cy.wait(500)
})
// Example #4 : FAIL
it('#4 Drags object to center of canvas (Object should be moved)', function () {
cy.get('rect').first()
.trigger('mousedown', { force: true})
.trigger('mousemove', { clientX: 250, clientY: 250, force: true})
.trigger('mouseup', {force: true})
cy.wait(500)
})
})
Любая помощь приветствуется. Заранее спасибо!